如何交互降低（或停止）jQuery滑塊的滑動速度？

Question

當鼠標指針懸停在幻燈片上時，我想放慢速度並最終停止幻燈片放映。

這是我到目前為止的腳本：

$(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/ 。 如果您訪問該站點，則是說幻燈片放映最接近頁面頂部。

Answer 1

我猜想您正在使用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';
        }
    });
});

Answer 2

使用這些設置可在懸停時減慢和暫停滑塊。

$(document).ready(function(){

    $('#slideshow').cycle({

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

    });

});

希望這可以幫助。

Answer 3

采用：

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