Question

我正在使用jQuery Cycle插件来创建一个非常简单的幻灯片。

脚本下方：

$(document).ready(function() {

var slideshow = $('#slider').cycle({

    fx: 'scrollHorz',
    speed: 500,
    timeout: 8000,
    prev: '#prev',
    next: '#next',
autostop: false 
    });
});

HTML的一部分：

<div id="slider">
<img class="slide" src="header/slider/images/FOTO_SCORRE2.jpg" alt="" />
<img class="slide" src="header/slider/images/FOTO_SCORRE3.jpg" alt="" />
<img class="slide" src="header/slider/images/FOTO_SCORRE4.jpg" alt="" />
<img class="slide" src="header/slider/images/FOTO_SCORRE5.jpg" alt="" />
</div>

我的问题是：在图像变化期间，如何改变幻灯片的速度？我希望图像从零速度加速到固定的最大速度，从中间过渡减速到零。

这有可能以一种简单的方式吗？

Answer 1

您所询问的技术名称是“缓解”请参阅许多示例jQuery UI Easing examples和Other easing Styles。看来Cycle插件有你可以设置的缓动挂钩。

Answer 2

谢谢，你是对的，周期插件支持宽松。我通过添加选项修改了代码：

easing: 'easeInOutExpo',

很容易！

jQuery Cycle插件水平滑块的可变速度

2 个答案: