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专家，这不是一个有效的例子，但这可能有助于指明你正确的方向。

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

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

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

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

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

1 个答案: