jQuery幻燈片放映和圖像旋轉問題

Question

我寫了一個代碼，一次從我的div顯示圖像。我的代碼正在工作，但問題是何時到達最後一張圖片，然後下一張圖片會再次成爲第一張圖片。在我的情況下，幻燈片停止在最後的圖像。假設我的div有四個圖像。當我測試它時，一次顯示一張圖像，但是當最後一張圖像到達時，幻燈片停止。我的意思是下一張圖片沒有顯示。第一張圖像應顯示爲下一張圖像。

在這裏，我發佈我的完整代碼。請有人看看並告訴我代碼中有什麼問題，如果可能的話，請糾正它。

我實現URL http://jsfiddle.net/tridip/jwxzv/

$(document).ready(function() { 
    slideShow(); 
}); 

function slideShow() { 
    $('#gallery img').css({ opacity: 0.0 }); 
    $('#gallery img:first').css({ opacity: 1.0 }); 
    setInterval('gallery()', 2000); 
} 

function gallery() { 
    var current = ($('#gallery .show') ? $('#gallery .show') : $('#gallery img').first()); 
    var next = (current.next().length > 0 ? current.next() : $('#gallery img').first()); 
    next.css({ opacity: 0.0 }) 
    .addClass('show') 
    .animate({ opacity: 1.0 }, 1000); 
    current.animate({ opacity: 0.0 }, 1000).removeClass('show'); 
} 

<style type="text/css"> 

.clear { 
clear:both 
} 

#gallery { 
    position:relative; 
    height:360px 
} 
#gallery img { 
    float:left; 
    position:absolute; 
} 

#gallery img { 
    border:none; 
} 

#gallery show { 
    z-index:500 
} 

</style> 

<div id="gallery"> 
<img src="images/flowing-rock.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" class="show" /> 
<img src="images/grass-blades.jpg" alt="Grass Blades" width="580" height="360" title="" alt="" /> 
<img src="images/ladybug.jpg" alt="Ladybug" width="580" height="360" title="" alt="" /> 
<img src="images/lightning.jpg" alt="Lightning" width="580" height="360" title="" alt="" /> 
</div> 

Answer 1

這裏被糾正代碼http://jsfiddle.net/jwxzv/3/

Answer 2

發現問題。這行代碼....

var next = ((current.next().length) ? ... 

應該

var next = ((current.next().length > 0) ? ... 

工作實例：http://jsfiddle.net/jwxzv/4/

---

此外，您的JS和CSS可以簡化了很多，不擔心類show。這也將解決您的問題。

工作示例：http://jsfiddle.net/jwxzv/11/

CSS

.clear { 
    clear:both 
} 
#gallery { 
    position:relative; 
    height:360px 
} 
#gallery img { 
    float:left; 
    position:absolute; 
    display:none; 
    border:none;  
    z-index:500 
} 

JS

$(document).ready(function() { 
    slideShow(); 
}); 

function slideShow() { 
    $('#gallery img').hide(); 
    $('#gallery img:first').fadeIn('fast') 
    setInterval('gallery()', 2000); 
} 

function gallery() { 
    var current = $('#gallery img:visible'); 
    var next = current.next('#gallery img'); 
    if (next.length==0) next = $('#gallery img:first') 
    current.fadeOut('medium'); 
    next.fadeIn('medium'); 
}