将悬停添加到setInterval（）？

Question

嗨，这里是我的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> 

Answer 1

你想用clearInterval删除悬停的时间间隔，然后在关闭悬停功能替换为：

$('#slide-show-overall').hover(function(ev){ 
    clearInterval(timer); 
}, function(ev){ 
    timer = setInterval(showDiv, 5000); 
}); 

Answer 2

$('#slide-show-overall > div').hover(
    function() { 
    clearInterval(timer) 
    }, 
    function() { 
    timer = setInterval(showDiv, 5000); 
    } 
); 

Answer 3

为什么不你把你的整个'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(); 
});