jQuery 将悬停暂停添加到 setInterval()？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10913703/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding pause on hover to setInterval()?
提问by Abhishek Umrao
Hi here's my jquery function for slideshow with other inbuilt function. I have been trying to make it pause when i hover over the overall div. Help me out!
嗨，这是我的带有其他内置函数的幻灯片的 jquery 函数。当我将鼠标悬停在整个 div 上时，我一直试图让它暂停。帮帮我！
$(function() {
var timer = setInterval( showDiv, 5000);
var counter = 2;
function showDiv() {
if (counter ==0) { counter++; return; }
$('div','#slide-show-overall')
.stop()
.fadeOut('slow')
.filter( function() { return this.id.match('picture-set-' + counter); })
.fadeIn('slow');
if (counter ==2) { slideWings();} //extra functions
if (counter ==1) { resetWings();} //extra functions
counter == 3? counter = 1 : counter++;
}
});
});
<div style="position:absolute;width:1000px;height:600;top:0px;z-index:0;overflow:hidden;" id="slide-show-overall" >
<div id="picture-set-1" style="">
<img src="images/3.jpg" align=left width=1000>
</div>
<div id="picture-set-2" style="display:none;">
<img src="images/1.jpg" align=left width=1000>
<img src="images/wing_left.png" align=left height=200 width=200 style="margin-top:-900px;margin-left:230px;" id="wing-left-1">
<img src="images/wing_right.png" align=left height=200 width=200 style="margin- top:-900px;margin-left:830px;" id="wing-right-1">
</div>
<div id="picture-set-3" style="display:none;">
<img src="images/5.jpg" align=left width=1000>
</div>
</div>
回答by mVChr
You want to use clearIntervalto remove the interval on hover and then replace it in the off hover function:
您想使用clearInterval删除悬停间隔，然后在关闭悬停功能中替换它：
$('#slide-show-overall').hover(function(ev){
clearInterval(timer);
}, function(ev){
timer = setInterval( showDiv, 5000);
});
回答by Sergei Zahharenko
$('#slide-show-overall > div').hover(
function () {
clearInterval(timer)
},
function () {
timer = setInterval( showDiv, 5000);
}
);
回答by Josef M. Schomburg
Why don't you put your entire 'setInterval' process into a function? That way you can stop it by name and start it by just calling the function.
为什么不将整个“setInterval”过程放入一个函数中？这样你就可以按名称停止它并通过调用函数来启动它。
// the function - set var up just in case
// the timer isn't running yet
var timer = null;
function startSetInterval() {
timer = setInterval( showDiv, 5000);
}
// start function on page load
startSetInterval();
// hover behaviour
$('#slide-show-overall').hover(function() {
clearInterval(timer);
},function() {
startSetInterval();
});
