jquery - 幻灯片在上一张图像后停止

我的幻灯片可以播放，但是当到达最后一张图像时，它将停留在该位置，并且不会继续。当我刷新页面时，它将再次从第一张图像开始，直到到达最后一张图像为止。

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

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

最佳答案

您在代码中未使用的$ active对象。如果删除了.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