0

我想在页面上动态更改 jquery 循环的选项。具体来说，我希望速度下降。根据其中一位创建者的说法，您可以使用“cycle.opts”来执行此操作。在我的例子中，我特别

$('.cycle-streams').cycle({
    fx: 'scrollVert',
    continuous: 1,
    speed: 1000,
    delay: 0,
    easing: 'linear'
});

var changedOpts = $('.cycle-streams').data('cycle.opts');

$('.cycle-streams').mouseover(function() {
    var changedOpts = $('.cycle-streams').data('cycle.opts');
    changedOpts.speed = 1000000000000;
    $('.cycle-streams').data('cycle.opts', changedOpts);
});

我已经为此工作了一段时间，并且对自己做错了什么感到迷茫。任何帮助，将不胜感激。jsfiddle 在这里... http://jsfiddle.net/bmXgj/

4

1 回答 1

2

我把你的小提琴改成了这样：

var changedOpts = $('.cycle-streams').data('cycle.opts');

$('.cycle-streams').mouseover(function() {
    //hover in
    $('.cycle-streams').cycle('pause');
    changedOpts.speedIn = 500;
    changedOpts.speedOut = 500;
    $('.cycle-streams').cycle('next');
    $('.cycle-streams').cycle('resume');   
});

$('.cycle-streams').mouseout(function() {
    //hover out
    $('.cycle-streams').cycle('pause');
    changedOpts.speedIn = 3000;
    changedOpts.speedOut = 3000;
    //$('.cycle-streams').cycle('next');
    $('.cycle-streams').cycle('resume');
});​

我注意到您出于某种原因重新声明了“changedOpts”。当我在控制台中看到这个变量时，它显示为未定义。既然你已经定义了它，我就继续使用它。

你也从来没有重置循环的状态。我添加了 pause 和 resume 。它现在似乎可以工作，但并不完美。最后一面需要在使用新速度之前清除，因此在尝试加速时剧烈跳跃（例如 3000 到 500）会导致明显的延迟。我还添加了下一条语句。

我注意到，当插件接下来处理它时，它正在清除超时。所以我想如果我存储剩余时间（暂停），然后移动到下一张幻灯片（下一张），然后恢复显示（恢复）时间将恢复。这似乎奏效了。

从快到慢时不需要“下一个”动作，因为离开容器时您通常不会注意到“孤儿”滑动，因为它正在快速循环。我把它放在那里是为了很好的衡量，以防你的速度相差不远。

我还注意到你只改变了一种速度。我假设，不看插件的内容，“速度”选项仅在初始化时使用。添加其他两种速度后，我得到了正确的动作。在查看了插件的“胆量”之后，我确信速度选项用于同步其他两种速度。如果它们都不匹配，您可能会不同步。初始化代码使用'speed'来设置'speedIn'和'speedOut'，所以我们需要改变这两个来影响'running'速度。

http://jsfiddle.net/bmXgj/6/

编辑：不需要暂停和恢复。

EDIT2：我确实需要暂停和恢复，但我还需要下一个。此外，“速度”选项一旦设置为第一次开始循环，就可以忽略。它似乎是 speedIn = speedOut = X 的简写

于 2012-12-13T21:54:22.870 回答