Question

我写了一个代码，一次从我的div中显示一个图像。我的代码正在运行，但问题是当到达最后一张图像时，下一张图像将再次成为第一张图像。在我的情况下，幻灯片放映在最后一张图像停止。假设我的div有四个图像。当我测试它时，一次显示一个图像，但是当到达最后的图像时，幻灯片显示停止。我的意思是下一张图片没有显示。第一张图像应显示为下一张图像。

我在这里发布我的完整代码。有人请看一下，告诉我代码中的问题是什么，如果可能的话，请纠正它。

我的实施网址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

发现问题。这行代码......

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

Answer 2

以下是更正后的代码http://jsfiddle.net/jwxzv/3/

jQuery幻灯片放映和图像旋转问题

2 个答案: