Question

这很简单，在最后一个孩子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（）在其后面。您可能希望从#reel中提取img元素并将它们存储在一个数组中，只在显示它们时添加它们。

jQuery旋转器总是快速回到第一个图像

1 个答案: