Question

我正在创建一个幻灯片演示，该幻灯片演示在我加载页面时自动运行，如果有人按下上一个/下一个按钮（clearInterval），它将停止播放。我的问题是，我希望间隔重新启动并在一段时间后清除。我已经尝试过使用setTimeout，但是我认为我做错了事。

它基于一个带有内部图像的“ ul”滑块，它将通过更改列表的边距来显示每个图像。这些按钮位于列表的侧面，具有“ data-mov”属性，它将返回“ prev”或“ next”，并将该值保存在名为“ dir”的变量中。

我保留了我拥有的实际js代码，关键点在于我认为的“幻灯片”功能之内。

非常感谢您！

( function(){

var slider = $( '.slider' );

var slides = slider.find("li").length;

var actual = 0;

var width = 310;

var interval = setInterval( function(){
    slide( 'next' );
}, 1500 );


function slide( dir, click ){

    if ( click ){
       clearInterval( interval );
    }

    ( dir === "next" ) ? actual -- : actual ++;
    if ( actual > 0 ) {
        actual = ( slides - 1 ) *  -1;
    }else if ( actual <= ( slides * -1  ) ) {
        actual = 0;
    }
    var margin = actual * width;

    slider.animate({
        marginLeft: margin
    }, 450);

}

$('.btn-slide').on('click', function () {

    var dir = $(this).data("mov");
//when the button is pressed we send "true" for the "click" argument
    slide( dir , true);
});

})();

Answer 1

在我看来，使用setTimout是重启幻灯片的完全有效的方法。

您可以通过执行以下操作轻松实现目标：

     var restartTimer;
     function slide( dir, click ){
        if ( click ){
           clearInterval( interval );
           clearTimeout(restartTimer);

           restartTimer = setTimeout(function () {
               setInterval(slide, 1500, 'next');
           }, 10000); // insert time after which you want it to continue here  
        }

        ( dir === "next" ) ? actual -- : actual ++;
        if ( actual > 0 ) {
            actual = ( slides - 1 ) *  -1;
        }else if ( actual <= ( slides * -1  ) ) {
            actual = 0;
        }
        var margin = actual * width;

        slider.animate({
            marginLeft: margin
        }, 450);
    }

setTimout将在10000毫秒后（在这种情况下）重新启动它，除非您碰巧手动移动滑块，否则超时将由clearTimeout函数重置。然后它将从该点开始等待，直到经过10000ms，之后它将再次继续。

清除间隔后如何自动重新启动间隔？

1 个答案: