如何无限循环播放此动画？

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

该代码将在启动最终的fadeIn之后的1000ms延迟后重新启动功能。 您可能需要更长的延迟时间，因为您需要花费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();
});

Answer 2

您可以将其移至函数并使用setInterval调用。

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

$(document).ready(function() {
    setInterval(AnimateBanners, 10000); //Will run every 10 seconds
});