Question

问题：

如何通过HTML元素上的鼠标交互异步更改jQuery Cycle的选项？

的jsfiddle

Here's a working example.请参阅意见以澄清意图

进行研究：

来自cycle的作者的

This tweet表明可以异步修改cycle的选项。

我在后续推文中询问他是否可以阐述这个主题，他说（释义）“继续潜伏。”

在检查了周期的源代码之后，我发现他并没有说谎。确实存在cycle.opts，并且还有debug函数，显然有一些值得一提的用途。但是，我对利用这些功能一无所知。

我可以使用cycle.opts返回对象的状态，但它是“......然后改变你需要的东西”，这是我无法弄清楚的方面。我查看了Options Reference page，其他选项的默认值似乎不会干扰。

Answer 1

好吧，除非我遗漏了什么，否则你的代码根本不会改变选项。试试这个：

$('#foo').mouseover(function(){
    var changedOpts = $('.shuffle').data('cycle.opts')
    changedOpts.speed = 0;
    $('.shuffle').data('cycle.opts', changedOpts);
});

Answer 2

使用您的方法，初始设置后无法动态更改悬停暂停行为。解决方法代码发布在下面。

我无法根据你问题中的jsFiddle示例来解决这个问题。

在我的情况下，我希望幻灯片放映像往常一样循环，但是在用户第一次点击图片后激活悬停行为暂停。

经过一些调试后，似乎我想动态改变的特定选项，即'pause'和'pauseOnPagerHover'，在第一次设置幻灯片后不会应用。

在没有找到实际原因的情况下，我在下面一起解决了我的问题的可行解决方案：

// After toggling image manually the first time by clicking it, enable pause on hover.
$('.slideshow-image-link').click(function (e) {
    e.preventDefault();
    // When clicked the first time, set up a hover event pausing the slideshow.
    // It seems like changing the 'pause' option can't be done dynamically after
    // setting up the slideshow cycle.
    $('#slideshow-images').cycle('pause');
    $('.slideshow-image-link').hover(
        function () {  // On mouse in.
            $('#slideshow-images').cycle('pause');
        },
        function () {  // On mouse out.
            $('#slideshow-images').cycle('resume');
        }
    );
});

这是展示上述代码的jsFiddle。

jQuery Cycle - 动态更改选项

2 个答案: