Question

我找到了这个用于垂直幻灯片放映的精彩脚本。我的问题是，我无法找到一种方法来停止鼠标悬停幻灯片。你能帮帮我吗？提前谢谢！

setInterval(

    function() {
        $('#ticker div').each(function() {
            $(this).animate({
                'top': '-=10px',
            }, 120, 

            function() {
                var top = parseInt($(this).css('top').replace('px', '')) +
                        parseInt($(this).css('height').replace('px', ''));

                if (top < 0) {
                    //console.log('removing', this)
                    var clone = $(this).clone();
                    var parent = $(this).parent();
                    clone.css('top', '550px');
                    $(this).remove();
                    parent.append(clone);
                }  
            })
        })
    }, 40
)

Answer 1

如果存储了intervalID，则可以停止间隔。这可能对你有用。代码如下所示：

var intervalID = null;
function startSlideshow() {
    intervalID = setInterval(function() {
        //do stuff
    }, 40);
}

$("#mySlideshow")
    .mouseover(function() {
        if(intervalID) {
            clearInterval(intervalID);
        }
    })
    .mouseleave(function() {
        startSlideshow(); // restart slideshow when the user isn't hovering anymore
    });

startSlideshow(); //initially start slideshow.

您可以在MDN找到有关clearInterval的更多信息。

Answer 2

这是代码 -

$("#ticker div").mouseover(function(){
    $(this).stop();
});

在鼠标悬停时停止jquery动画

2 个答案: