jquery - 幻灯片放映在最后一张图像后停止

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