javascript - 如何使jQuery每个循环重复无限次

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();

---

由于有3个img，每一个显示延迟3000，fadeOut默认需要400ms，延迟应该是:

3*3000+400 = 9400

请注意，每个下一个淡入都不会等待前一个淡出完成，因此窃取了前两个 400 毫秒的淡出延迟。