jQuery rotator始终会捕捉回第一张图像

Question

这相当简单，在最后一个子img之后，代码会迅速返回到第一个img，并且由于某种原因，fadeOut效果没有发生。

下面是HTML：

<div id="reel">
<img src="http://www.myweddingflowerideas.co.uk/wedding-flowers.jpg" />
<img src="http://www.aumflowersindiaflorists.com/images/flowers-chennai-1.jpg" />
<img src="http://img4.sunset.com/i/2008/12/image-adds-1217/alcatraz-flowers-galliardia-m.jpg?300:300" />
<img src="http://www.flowerslebanondelivery.com/catalog/images/Val101.jpg" />
<img src="http://www.weddingfloweridea.com/wp-content/uploads/2011/01/wedding-flowers-11.jpg" />
<img src="http://flowershopsflowers.com/wp-content/uploads/2011/04/Cardinal-Flowers.jpg" />
</div>

CSS：

#reel img{
position:absolute;
}

jQuery：

$(document).ready(function(){
$("#reel img:lt(5)").hide();
var counter = $("#reel img").length-1;

var i = setInterval(function() {

           $("#reel img").eq(counter).show();    
        $("#reel img").eq(counter - 1).show();
        $("#reel img").eq(counter).fadeOut(2000);
        counter--;

        if (counter === 0) {
            counter = 5;
        }
    }, 4000);

});

查看此小提琴以查看实际问题：http://jsfiddle.net/FB9a9/

我想要的就是将最后一个图像fadeOut到第一个图像上，而不是捕捉到它，所以有没有办法做到这一点？

Answer 1

问题是，当您到达末尾(第0个图像)时，标记中的下一个图像(第5个)紧随其后，从而使其具有更高的堆叠顺序。调用show()使其在顶部可见，并在其后面显示另一个图像fadeOut()。您可能希望将img元素从#reel中提取出来，并将其存储在一个数组中，仅在显示时添加它们。