如何以交互方式降低（或停止）jQuery 滑块的滑动速度？答案

【问题标题】：How do I interactively reduce (or stop) the sliding speed of a jQuery slider?如何以交互方式降低（或停止）jQuery 滑块的滑动速度？
【发布时间】：2012-02-28 00:33:50
【问题描述】：

当鼠标指针悬停在幻灯片上时，我想放慢速度并最终停止幻灯片放映。

这是我目前的脚本：

$(document).ready(function(){    
    $('#slideshow').cycle({    
        fx:     'fade',    
        speed:  'fast',    
        timeout: 1000,    
        pager:  '#slider_nav',    
        pagerAnchorBuilder: function(idx, slide) {    
            // return sel string for existing anchor    
            return '#slider_nav li:eq(' + (idx) + ') a';
        }
    });
});

这是我正在开发的网站：http://www.getushopping.com/。如果您访问该网站，我指的是最接近页面顶部的幻灯片播放。

【问题讨论】：

-1 表示零努力。也许我不明白这个问题......你在问 “如何降低速度” 而speed: 参数（设置为'fast'）就在你提供的代码中，平淡如日。您是否已经尝试将其更改为'slow'？至于问题的第二部分，您是否至少阅读了插件的文档？

标签： jquery jquery-cycle

【解决方案1】：

使用这些设置在悬停时减慢和暂停滑块。

$(document).ready(function(){

    $('#slideshow').cycle({

        fx:     'fade', 
        speed:   300, 
        timeout: 3000, 
        pause:   1

    });

});

希望这会有所帮助。

【讨论】：

【解决方案2】：

我猜你正在使用 jQuery Cycle 插件，所以我会在这里查看“初学者演示”：

http://jquery.malsup.com/cycle/begin.html

从上面的页面：

速度选项定义了从一张幻灯片过渡到下一张幻灯片所需的毫秒数。

要在鼠标悬停时暂停，请阅读该页面上的 #4。

看来您需要包含此选项：

pause:  1

所以你的代码最终会是这样的：

$(document).ready(function(){

    $('#slideshow').cycle({

        fx:     'fade',

        speed:  '1000', // This is 1000 mili-seconds, or 1 second

        pause:  1,            

        timeout: 1000,

        pager:  '#slider_nav',

        pagerAnchorBuilder: function(idx, slide) {

            // return sel string for existing anchor

            return '#slider_nav li:eq(' + (idx) + ') a';
        }
    });
});

【讨论】：

【解决方案3】：

用途：

speed: 1000,  //or some other value your prefer like 300, 400, etc
...

【讨论】：