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

Crappy demo：http://jsfiddle.net/tJvLy/

更改第一个图像后，jQuery图像旋转器停止

1 个答案: