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

为什么不把你的整个＆＃39; setInterval＆＃39;进入功能？这样你就可以通过名字来阻止它并通过调用函数来启动它。

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

在悬停时添加暂停到setInterval（）？

3 个答案: