jquery - jQuery 图像旋转器在更改第一张图像后停止

Question

我的 jQuery 图像旋转器有一个小问题。基本上，我的旋转器应该检查是否所有图像都已加载，如果已加载，则应在顶部 eq(5) 上显示第一个图像，然后再显示一个。我的脚本适用于第一张图像，但我不知道如何让它循环遍历所有图像并重复自身。基本上，我只想知道如何让我的旋转器在无限循环中循环遍历所有图像。

HTML：

<div id="reel">
<img src="images/reel6.jpg" />
<img src="images/reel5.jpg" />
<img src="images/reel4.jpg" />
<img src="images/reel3.jpg" />
<img src="images/reel2.jpg" />
<img src="images/reel1.jpg" />
</div>

jQuery：

$(document).ready(function(){
$("#reel img").hide();
eq=5;
$("#reel img").load(function(){
function promeni(eq){
    $("#reel img").eq(eq).show();
    $("#reel img").eq(eq-1).show();
    $("#reel img").eq(eq).delay(2000).fadeOut(2000);
}
promeni(eq);
});
});

Answer 1

这样的事情应该可以解决问题：

$("#reel img").hide();
var counter = $("#reel img").length;

var i = setInterval(function() {
            $("#reel img").eq(counter - 1).show();
            $("#reel img:visible").fadeOut(2000);
            counter--;
            if (counter === 0) {
                counter = 5;
            }
        }, 2000);

蹩脚的演示：http: //jsfiddle.net/tJvLy/