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 对象。如果您删除了.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

幻灯片停留在上一张图片

3 个答案: