將懸停添加到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(); 
});