jquery - 如何无限循环播放该动画？

Question

我对 jquery 有点陌生，我设法编写了一个小动画，可以淡入和淡出两张图片。

我现在的问题是，在它完成一个循环之后，它就停止了。当它到达终点时，我需要它再次从头开始。它应该继续。

这是代码

$(document).ready(function() {
    $('img.banner1').fadeOut(5000);
    $('img.banner2').delay(1000).fadeIn(5000);
    $('img.banner2').delay(1000).fadeOut(5000);
    $('img.banner1').fadeIn(5000).delay(1000);
});

Answer 1

此代码将在开始最终淡入后 1000 毫秒延迟后重新启动该函数。不过，您可能需要更长的延迟，因为您需要 5000 毫秒才能淡出该横幅...

function animateBanners() {
    $('img.banner1').fadeOut(5000);
    $('img.banner2').delay(1000).fadeIn(5000);
    $('img.banner2').delay(1000).fadeOut(5000);
    $('img.banner1').fadeIn(5000).delay(1000).queue(animateBanners);
}

$(document).ready(function() {
    animateBanners();
});