javascript - jQuery Cycle2 悬停时反转

Question

所以我尝试使用 Cycle2 插件创建一个轮播。与此的不同之处在于，不仅仅是在单击下一个和上一个按钮时来回循环，当将鼠标悬停在按钮上时，它也会开始来回循环。

我可以使用以下代码为下一个按钮创建此行为，该代码暂停轮播并在下一个按钮悬停时恢复轮播。

$('.cycle-slideshow').cycle('pause');

$('#next').hover(function () {
    //mouse enter - Resume the slideshow
    $('.cycle-slideshow').cycle('resume');
}, function () {
    //mouse leave - Pause the slideshow
    $('.cycle-slideshow').cycle('pause');
});

我无法弄清楚如何在上一个按钮悬停时反转幻灯片的方向。有什么想法吗？

非常感谢您的任何意见。提前致谢。

Answer 1

假设.cycle('prev') 不会取消暂停轮播。如果确实如此，您将需要在每次 .prev 调用和鼠标离开功能后再次暂停。

尝试如下:

var intervalVar;

$('#prev').hover(function () {
    //mouse enter - Resume the slideshow
    intervalVar = setInterval(function(){
        $('.cycle-slideshow').cycle('prev');
    },1000);
}, function () {
    //mouse leave - Pause the slideshow
    clearInterval(intervalVar);
});

这假设您每 1 秒循环一次。您可以更改 1000 以匹配轮播设置转换的毫秒数。