Question

我正在使用实体化转盘，并且正在使用setInterval（）自动更改幻灯片，但我希望此setInterval在悬停时应该停止/暂停，在悬停时重新开始。

我尝试使用clearinterval，但效果不理想。

$(document).ready(function(){

    $('.carousel').carousel(); // Start carousel

    /*  I WAS USING THIS BEFORE JUST FOR CHANGING SLIDES AUTOMATICALLY
    setInterval(function(){
        $('.carousel').carousel('next');
    },2500);
    });
    */

    // THIS IS WHAT IHAVE TRIED

    var myVar;

    function start(){
        var myVar = setInterval(next, 2500);
        function next() {
            $('.carousel').carousel('next');
        }
    }

    function stop() {
        clearInterval(myVar);
        myVar = 0;
    }

    $('.carousel').mouseenter(function(){stop();});
    $('.carousel').mouseleave(function(){start();});

    start();
});

代码没有给出任何错误。

Answer 1

替换此行：

var myVar = setInterval(next, 2500);

与此：

myVar = setInterval(next, 2500);

您已经定义了全局变量，并且在start函数中，您将再次初始化变量并将赋值setInterval分配给它。这意味着myVar除了start函数外，其余代码仍未分配。因此clearInterval不起作用。

您只需要将返回值分配给全局变量myVar即可使用。

使用setinterval和clearinterval在mouseleave上开始动画，并在mouseenter上停止

1 个答案: