1

所以我正在尝试使用 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');
});

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

非常感谢任何输入。提前致谢。

4

1 回答 1

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

于 2014-01-27T17:31:04.597 回答