Question

我有一个setInterval（）函数，只需每隔4秒就可以通过一个值操作来改变页面上的图片。

setInterval(function(){
    changeSlide(slideNumber);
    slideNumber++;
    if(slideNumber===5)slideNumber=0;
},4000);

如您所见，此值为slideNumber。

现在，我想要的是：

当你在元素上移动mouseenter（比如id =“hoverElement”）时，间隔必须停止，因为图片必须保持原位，我的changeSlide会显示并隐藏这些图片。

当你鼠标移动时，它等待那4000毫秒并继续。

我该怎么做？

编辑：

抱歉，它不起作用

这是我的代码

function slide(){
    slideTimer = setInterval(function(){
        changeSlide(slideNumber);
        slideNumber++;
        if(slideNumber===5)slideNumber=0;
    },4000);
}

slide();

$('#hoverElement').mouseenter(function(){
    clearInterval(slideTimer);
    console.log('mouseenter');
});
$('#hoverElement').mouseleave(function(){
    slide();
    console.log('mouseleave');
});

几乎相同，并且它不会停止mouseenter上的间隔。我之前尝试过你的代码，它也没有用。

Answer 1

刚开始并清除悬停时间间隔：

var timer, slideNumber = 0;

function slide() {
    timer = setInterval(function(){
        changeSlide(slideNumber);
        slideNumber++;
        if(slideNumber===5) slideNumber=0;
    },4000);
}

function unslide() {
    clearInterval(timer);
}

slide();

$('#hoverElement').on({
    mouseenter: unslide,
    mouseleave: slide
});

这是DEMONSTRATION以显示它正常工作！

刷新悬停时的setInterval

1 个答案: