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

我是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 });