0

我有一个 setInterval() 函数，它通过简单地操作一个值，每四秒更改一次页面上的图片。

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

如您所见，此值为 slideNumber。

现在，我想要什么：

当您在 element(let say id="hoverElement") 上移动 mouseenter 时，间隔必须停止，因为图片必须保持原位，并且我的 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 上的间隔。我之前试过你的代码，它也不起作用。

4

1 回答 1

2

只需启动并清除悬停间隔：

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
});

这是一个演示它的工作原理！

于 2013-07-02T13:10:02.750 回答