jQuery回転子は常に最初の画像にスナップバックします

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/

は

私が欲しいのは、最初に1枚目にフェードアウトする最後のイメージです。それにスナップするのではなく、そうする方法がありますか？

Answer 1

問題は、最後（0番目の画像）に到達すると、次の画像（5番目）がマークアップの後に来るため、より高い積み重ね順序が与えられることです。 show（）を呼び出すと、上に表示され、他のイメージはその背後にあるfadeOut（）になります。 img要素を#reelから取り出して配列に格納し、表示されているときに追加するだけです。