jquery自動淡入淡出在一系列圖像上？

Question

我基本上試圖做一個幻燈片放映，圖片在5秒左右後淡入淡出。幻燈片顯示了一堆堆疊在一起的圖像，而不是並排。如何在5秒後讓img1 fadeout和img2淡入，然後在接下來的5秒後有img2淡出和img3淡入淡出等。

我想使用setInterval（）函數，但我不知道它是如何工作的。也許延遲（）？

Answer 1

爲什麼不使用這樣做的插件？有他們噸，其中包括cycle

Answer 2

你不需要一個插件。這是很容易用幾行代碼做到這一點：

HTML

<div id="images"> 
    <ul 
     ><li><img src="img/11.jpg" width="520" height="203" alt="" /></li 
     ><li><img src="img/12.jpg" width="520" height="203" alt="" /></li 
     ><li><img src="img/13.jpg" width="520" height="203" alt="" /></li 
     ><li><img src="img/14.jpg" width="520" height="203" alt="" /></li 
     ><li><img src="img/15.jpg" width="520" height="203" alt="" /></li 
     ><li><img src="img/5.jpg" width="520" height="203" alt="" /></li 
    ></ul> 
</div> 

CSS

#images ul{position:absolute;right:9px;top:1px;width:520px;height:202px;list-style:none;overflow:hidden} 
#images li{display:none;position:absolute;left:0;top:0;} 

JS

$(document).ready(
    function() { 
    var i = 0, j = 0; 
    var imgs = $('#header ul').children(); 
    runIt(imgs); 

    function runIt() { 
     $(imgs).eq(i).fadeIn(3000, function() { 
     setTimeout(runIt,'200'); 
     }); 
     i = i + 1; 
     if (i == imgs.length) { 
     i = 0; $('#images li').fadeOut(1000) 
     } 
    } 
}); 

Answer 3

當我試圖使用fadein和fadeout切片庫時，IE遇到了問題。我正在使用jQuery庫「http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js」。當我更改爲「http://code.jquery.com/jquery-1.9.1.js」庫時，IE，Chrome和FF都可以使用，我可以跳過所有修改。