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/

我想要的只是最後一張圖像，可以淡入到第一張圖像上，不會陷入它，所以有辦法這樣做嗎？

Answer 1

問題在於，當您到達最後（第0張圖片）時，下一張圖片（第5張）會出現在標記之後，從而給出更高的堆疊順序。調用show（）使它在頂部可見，而其他圖像fadeOut（）位於它的後面。您可能希望將img元素從#reel中取出並將它們存儲在數組中，只在顯示時才添加它們。