如何在 jQuery 上重复或循环这个队列？答案

【问题标题】：How to repeat or loop this queue on jQuery?如何在 jQuery 上重复或循环这个队列？
【发布时间】：2010-07-18 11:20:58
【问题描述】：

这是褪色幻灯片的代码。有没有办法重复或循环这个队列？重新开始这个顶级代码$("#page2_image").hide();

这是 jQuery 中的代码：

$(document).ready(function(){
   $("#page2_image").hide();
   $("#page3_image").hide();
   $("#page1_image").fadeOut(10000);
   $("#page2_image").fadeIn(10000).fadeOut(10000);
   $("#page3_image").delay(10000).fadeIn(10000);
});

感谢您的帮助！

【问题讨论】：

标签： javascript jquery loops queue

【解决方案1】：

可以使用fadeIn()的回调

$(document).ready(function(){
   function loop(){
   $("#page2_image").hide();
   $("#page3_image").hide();
   $("#page1_image").fadeOut(10000);
   $("#page2_image").fadeIn(10000).fadeOut(10000);
   $("#page3_image").delay(10000).fadeIn(10000,loop); // call loop here...
  }
  loop();
});

你也可以尝试类似的方法here

【讨论】：

【解决方案2】：

我认为您正在寻找的是一种稍微不同的方法，如下所示：

$(function() {
  var images = ['#page1_image', '#page2_image', '#page3_image'], i = 0;
  function rotate() {
    $(images[i]).fadeOut(10000);
    i = (i+1)%images.length;
    $(images[i]).fadeIn(10000, rotate);
  } 
  $.each(images.slice(1), function(index, val) { $(val).hide(); });
  rotate();  
});

Give it a try here，如果您没有平滑地返回到第一张图像，当循环循环时，您的动画会发生跳跃。上面的内容平滑地连续淡出，并且适用于您想要循环通过的任意数量的元素，只需将它们的选择器添加到数组中。

组件是：

将选择器数组设置为淡出...如果选择器不是 ID，您甚至可以在此处缓存选择器，而不是字符串。
Rotate 淡出当前，获取下一个（如果需要环绕）并淡入，完成后.fadeIn() 将再次调用rotate。
最后我们隐藏了除第一张以外的所有图片（通过.slice()），并开始循环。

【讨论】：

【解决方案3】：

使用 setInterval 使函数每 X 秒重复一次。

function slideSwitch() {
   $("#page2_image").hide();
   $("#page3_image").hide();
   $("#page1_image").fadeOut(10000);
   $("#page2_image").fadeIn(10000).fadeOut(10000);
   $("#page3_image").delay(10000).fadeIn(10000);
}

$(function() {
    setInterval( slideSwitch, xxxx );
});

【讨论】：

应该是setInterval(slideSwitch, xxxx );，尽量不要给setInterval()或setTimeout()传递字符串，这是不必要的开销，会改变范围。