jQuery 悬停时暂停功能？

发布于 2024-10-13 04:51:25 字数 608 浏览 0 评论 0原文

我有一个 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);

原文

I have a jQuery/JS function that is using setInterval to loop through some image slides I have. It just flips through every 5 seconds...

Now I want it to pause if my mouse is hovered over it. How do I go about doing that on the setInterval function?

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);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

疑心病 2024-10-20 04:51:25

假设 interval 是在外部作用域中定义的，这样的事情就可以工作：

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

Something like this would work assuming interval is defined in an outer scope:

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

回复收藏 0 原文

拥抱没勇气 2024-10-20 04:51:25

(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，以便更快地通过测试。

希望这有帮助。

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

Example: http://jsfiddle.net/Zq7KB/3/

I reused some old code I wrote for a question the other day, but I figured it didn't matter that much. The trick is to store your interval in a variable that you keep in the background. Then, when you hover over the container, clear the interval. When you hover out of the container, re-set the interval. To get a better feel of how this works, change those 5000s to 1000s so it passes more quickly for testing.

Hope this helps.

回复收藏 0 原文

~没有更多了~