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'); 
}