jQuery 旋转器，悬停在 div 和小缩略图导航上时暂停

Question

下面是我想要更新新功能的 jsfiddle.net 代码：

http://jsfiddle.net/weigruf/mKj8p /

我想添加的是当您将鼠标悬停在 .rotator .rotator-child div 上时序列上的暂停和一个小缩略图导航，它将显示同一图像的小版本，您可以导航通过他们。

此外，缩略图导航也应该具有暂停效果。

提前致谢。 （：

编辑1：

我组合了代码，并用 .mouseenter 更新了代码，现在序列已暂停，但是我想在 .mouseleave 上恢复序列，并在光标位于 div 上时再次暂停。

请看一下：

http://jsfiddle.net/weigruf/mKj8p/

Answer 1

无论如何，我都不是 jQuery/JS 专家，这不是一个有效的示例，但这可能会帮助您指明正确的方向。

我没有使用 setTimeout，而是使用 setInterval。鼠标悬停时，清除间隔，这样它就不会再次触发。在 mouseleave 上，等待 6 秒，然后运行函数 doRotate()，该函数将再次重新启动计时器，并加载新广告。

function doRotate() {
    next();
    theInterval = setInterval(doRotate, 6000);
}

$('#myAdElement').mouseenter(function() {
   clearInterval(theInterval)
})

$('#myAdElement').mouseleave(function() {
   setTimeout(function() {
       doRotate();
   }, 6000);
})