0

かなり単純です。最後の子 img の後、コードは最初の子 img にスナップバックし、何らかの理由でフェードアウト効果は発生しません。

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 に答える