jQuery Cycle - 动态更改选项

Question

问题：

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

---

jsFiddle

这是一个工作示例。 请参阅评论以澄清意图

---

进行的研究：

这个来自cycle作者的推文揭示了可以异步修改cycle的选项。

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

检查了cycle的源代码后，我发现他没有说谎。 cycle.opts 确实存在，而且还有一个 debug 函数，显然有一些值得注意的用途。然而，我对如何利用这些功能知之甚少。

我可以使用 Cycle.opts 返回对象的状态，但这是“...然后更改您需要的内容”，这是我无法弄清楚的方面。我已经查看了选项参考页面，并且其他选项的默认值没有出现就像他们会干涉一样。

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< /a> 演示上面的代码。