簡單衰落圖像交換

Question

我無法找到一個簡單的jQuery圖像交換。我發現的大部分例子都比我需要的更復雜，並且做我不想要的東西。

目的：我有5張圖片我想淡入，在滑動，或者等我很想淡出/溶解從一個圖像到下一個，但幻燈片將被罰款了。當頁面加載一號，我希望一號圖像顯示4秒鐘......然後淡出到下一個圖像，4秒，那麼接下來，等無限循環。

目前我的代碼是一個簡單的圖像交換，不是很優雅：

document.getElementById("imgMain").src = "images/yurt/sleigh.png"; 

什麼是實現這一目標的最好，最簡單的方法是什麼？

Answer 1

Working example on jsFiddle.

下面的代碼：

HTML

<div class="fadein"> 
    <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg"> 
    <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg"> 
    <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg"> 
    <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg"> 
    <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg"> 
</div> 

CSS

.fadein { 
    position:relative; 
    height:320px; 
    width:320px; 
} 

.fadein img { 
    position:absolute; 
    left:0; 
    top:0; 
} 

的JavaScript

$('.fadein img:gt(0)').hide(); 

setInterval(function() { 
    $('.fadein :first-child').fadeOut() 
          .next('img') 
          .fadeIn() 
          .end() 
          .appendTo('.fadein'); 
}, 4000); // 4 seconds