0

很简单，在最后一个子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/

我想要的只是最后一个图像淡出到第一个图像上，而不是捕捉到它，那么有没有办法做到这一点？

4

1 回答 1

1

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

于 2011-07-19T14:04:53.553 回答