幻灯片在最后一张图像后停止

Question

我的幻灯片放映正常，但是当到达最后一张图片时它会停留在那里并且不会继续，当我刷新页面时它再次从第一张图片开始并一直工作直到到达最后一张图片。

HTML:

       <div class="slider">

        <img src="slide1_hamburger.jpg" class="slide_image slider_active"></img>
        <img src="slide2_eetzaal.jpg" class="slide_image"></img>
        <img src="slide3_carpaccio.jpg" class="slide_image"></img>

    </div>

CSS:

.slide_image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    position: absolute;
    opacity: 0;
      transition: opacity 2s ease-in-out;
   -moz-transition: opacity 2s ease-in-out;
   -webkit-transition: opacity 2s ease-in-out;
}


.slider_active {
    opacity: 1;
    transition: opacity 2s ease-in-out;
   -moz-transition: opacity 2s ease-in-out;
   -webkit-transition: opacity 2s ease-in-out;
}

Jquery:

function slideSwitch() {
        var $slider_active = $('div.slider IMG.slider_active');
        var $next = $slider_active.next();    

        $next.addClass('slider_active');

        $active.removeClass('slider_active');
    }

    $(function() {
        setInterval( "slideSwitch()", 5000 );
});

有谁知道为什么它会停在最后一张图片上而不会继续？提前致谢。

Answer 1

它在最后一张图像处停止，因为例程试图获取不存在的 .next() 元素。

您需要添加一个检查以查看 $next 是否确实存在，如果不存在则返回开始。类似于：

function slideSwitch() {
    var $slider_active = $('div.slider IMG.slider_active');
    var $next = $slider_active.next();    

    if(!$next) {
        $next = $('div.slider IMG')[0];
    }

    $next.addClass('slider_active');

    $slider_active.removeClass('slider_active');
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

Answer 2

您所要做的就是将 $next 变量指向第一张图像，一旦它到达图像的末尾。

用

替换var $next = $slider_active.next();

var $next =  $slider_active.next().length ? $slider_active.next() : $('div.slider IMG:first');

Answer 3

您在代码中未使用 $active 对象。如果您删除 class .slider_active 和一个更正 如果您希望所有浏览器都支持，您的 setInterval 仅适用于 mozila

setInterval(slideSwitch, 5000 );

只需使用

$('.slider_active').removeClass('slider_active');

你的代码是

function slideSwitch() {
        var $slider_active = $('div.slider IMG.slider_active');
        var $next = $slider_active.next();  
        $('.slider_active').removeClass('slider_active');
        $next.addClass('slider_active');
        if($next.length == 0){  // for cyclic rotation
         $('div.slider IMG:eq(0)').addClass('slider_active');
        }
 }
$(function() {
    setInterval(slideSwitch, 5000);
});

Fiddle sample

幻灯片在最后一张图像后停止

Slideshow Stops after last image

html

css

jquery

slideshow