Question

这是褪色幻灯片的代码。有没有办法重复或循环这个队列？要重新开始使用此顶级代码$("#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);
});

感谢您的帮助！

Answer 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

Answer 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，你甚至可以在这里缓存选择器，这是一个好主意，而不是字符串。
旋转淡出当前流量，获取下一个流量（如果需要，将其包裹起来）并淡入其中，.fadeIn()会在完成后再次调用rotate。
最后我们隐藏了除第一个以外的所有图像（通过.slice()），然后开始循环。

Answer 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 );
});

如何在jQuery上重复或循环此队列？

3 个答案: