Question

我有一个jQuery / JS函数，它正在使用setInterval来遍历我的一些图像幻灯片。它只是每5秒翻转一次......

现在我希望它暂停，如果我的鼠标悬停在它上面。我如何在setInterval函数中执行此操作？

var current = 1;

function autoAdvance() {
    if (current == -1) return false;

    jQuery('#slide_menu ul li a').eq(current % jQuery('#slide_menu ul li a').length).trigger('click', [true]);
    current++;
}

// The number of seconds that the slider will auto-advance in:
var changeEvery = jQuery(".interval").val();
if (changeEvery <= 0) {
    changeEvery = 10;
}
var itvl = setInterval(function () {
    autoAdvance()
}, changeEvery * 1000);

Answer 1

假设interval在外部范围中定义，这样的事情就可以了：

$('.slideshow img').hover(function() {
  interval = clearInterval(interval);
}, function() {
  interval = setInterval(flip, 5000);
});

Answer 2

(function () {
    var imgs = $('#your_div img'), index = 0, interval,

        interval_function = function () {
            imgs.eq(index).hide();
            index = (index + 1) % imgs.length;
            imgs.eq(index).show();
        };

    imgs.eq(0).show();
    interval = setInterval(interval_function, 5000);

    $('#your_div').hover(function () {
        clearInterval(interval);
    }, function () {
        interval = setInterval(interval_function, 5000);
    });
}());

示例：http://jsfiddle.net/Zq7KB/3/

我重新使用了我前几天写的一些旧代码，但我认为这并不重要。诀窍是将您的间隔存储在您保留在后台的变量中。然后，当您将鼠标悬停在容器上时，请清除间隔。当您将鼠标悬停在容器外时，请重新设置间隔。为了更好地了解其工作原理，请将5000更改为1000，以便更快地通过测试。

希望这有帮助。

悬停时jQuery暂停功能？

2 个答案: