更改 jQuery 轮播速度

引言

我们已经讨论过将 jQuery Slider 插件集成到 ASP.NET Repeater 控件中。现在在这篇博文中，我们将更改滑块的默认速度。

背景

我之前提到的博文是 – ASP.NET Repeater with jQuery Slider。我解释了一些简单的步骤，将 jQuery Elastiside 插件 与 Repeater 集成。这篇博文很成功，我也收到了很多评论和问题。在这篇博文中，我将解释其中一个问题，我被问到的。我引用如下：

你好 taditdash,

我在速度方面遇到了问题。默认设置为 500。我想增加但没有效果。我在 jquery.elastislide.js 中更改了值 (speed : 50) 并且也尝试在函数 _validate : function() { this.options.speed = 500; value 中更改，但没有效果。你能帮我解决这个问题吗？请帮忙。

谢谢

这真是一个发人深省的问题。

开始我的研究

我立即打开了 jQuery 插件文件，并尝试查看是否有任何选项可以做到这一点。我只是搜索了单词 “speed”，并发现了一个非常有趣的 code block，如下所示。

$.Elastislide.defaults = {
    // orientation 'horizontal' || 'vertical'
    orientation : 'horizontal',
    // sliding speed
    speed : 500,
    // sliding easing
    easing : 'ease-in-out',
    // the minimum number of items to show. 
    // when we resize the window, this will make sure minItems are always shown 
    // (unless of course minItems is higher than the total number of elements)
    minItems : 3,
    // index of the current item (left most item of the carousel)
    start : 0,
    // click item callback
    onClick : function( el, position, evt ) { return false; },
    onReady : function() { return false; },
    onBeforeSlide : function() { return false; },
    onAfterSlide : function() { return false; }
};

你能猜猜这个 code block 实际是做什么的吗？正如名称 $.Elastislide.defaults 所暗示的那样，当我们通过 $('#carousel').elastislide(); 初始化 elastislide 时，它会默认设置这些属性。所以，速度默认是 500 毫秒。

解决方案

要更改速度，我们需要告诉插件我们想要不同的速度，而不是默认速度。为此，我们需要在初始化 elastiside 时将 speed 参数传递给 elastislide()。让我编写代码来阐明我的意思。

$('#carousel').elastislide({ speed: 50 });

现在，滑块将以更快的速度滑动。如果你将其更改为 5000，它将以较慢的速度滑动。

$('#carousel').elastislide({ speed: 5000 });

结论

如果你还没有开始使用 jQuery Slider，请参考我之前撰写的 博文。如有任何问题或建议，请在下方评论。

感谢阅读。祝你愉快。 :)