jQuery Cycle - 动态改变选项

Question

问题：

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

---

jsFiddle

Here's a working example.意图说明请参考cmets

---

进行的研究：

cycle 的作者This tweet 透露，可以异步修改cycle 的选项。

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

在查看了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 示例，我无法使其正常工作。

在我的例子中，我希望幻灯片像往常一样循环播放，但在用户第一次单击图像后激活悬停行为。

经过一些调试后，似乎我想动态更改的特定选项，即“暂停”和“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 演示上面的代码。