jQuery Cycle - 动态更改选项

Question

问题：

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

---

jsFiddle

这里是一个工作示例。 有关意图的澄清，请参阅评论

---

进行的研究：

Cycle的作者在推特上发布的一条消息表明可以异步修改cycle的选项。

我在一条跟进的推文中问他是否能详细说明这个主题，他说（意思是）“继续潜伏。”

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

我可以使用cycle.opts返回对象的状态，但我无法弄清楚“...然后更改所需内容”的方面。 我已经查看了选项参考页面和其他选项的默认值似乎不会干扰。

- user110857

---

我发现这非常有帮助。JS Fiddle 反映了 @bububaba 的答案，不是吗？难道不应该被接受吗？ - Owen Hoskins

Answer 1

嗯，除非我漏掉了什么，你的代码中根本没有改变选项。尝试这样做：

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

- bububaba

---

我觉得这肯定是正确的方向。在给 .data 添加更多参数之前，这应该对我来说很明显。我想在转换变成即时之前，还有几个干扰的选项需要配置。谢谢！ - user110857

在查看了“选项参考”页面之后，我注意到其他选项的默认值不应该产生干扰。对此我深表歉意。我还忘了提到，在#foo上指定了一个“pager”（请参见新的jsFiddle示例）。这可能会导致问题吗？ - user110857

函数的第三行：$('.shuffle').data('cycle.opts', changedOpts);是不必要的，因为changedOpts是对cycle.opts对象的引用。 - Andy

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

- Markus Amalthea Magnuson

---

抱歉让你等这么久。我决定在jsFiddle上尝试你的代码，虽然我们仍然无法获得所需的能力，但它确实产生了所需的行为。我现在会接受这个答案。 - user110857