Question

我正在尝试创建幻灯片，并在循环浏览每个图像后重复each循环。我已经尝试了所有的东西但是在循环通过每个图像之后无法继续循环。请参阅下面的代码和尝试。

有人有什么想法吗？尝试了一切。

HTML

<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-1.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-5.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-3.jpg" />

JS

function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(3000 * index).fadeIn(3000).fadeOut();
    });

   if(index === 3){
      index = 0;
   }
}
test();

Answer 1

你应该在间隔之后再次启动循环，不需要重置索引（这也完全没有）。

function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(3000 * index).fadeIn(3000).fadeOut();
    });
    setTimeout(test,9400)
}
test();

由于有三个img，每个显示延迟为3000，fadeOut默认为400 ms，延迟应为：

3 * 3000 + 400 = 9400

请注意，每个下一个fadeIn都不会等待前一个fadeOut的完成，从而窃取fadeOut的前两个400 ms延迟。

Answer 2

您最好的选择是使用承诺：

function test() {
    $("img").hide().each(function(index) {
        $(this).delay(3000 * index).fadeIn(3000).fadeOut();
    }).promise().done(test);
}
test();

如何让jQuery每个循环重复无限次

2 个答案:

-jsFiddle-