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以匹配您的轮播设置为转换的毫秒数。

jQuery Cycle2在悬停时反转

1 个答案: