天天看点

使用jQuery Tools scrollable注意事项

目开发中一直使用jquery

tools中scrollable插件,一直也只是停留在使用上,最多看文档实现如何调用它的prev(spped)和next(speed)等几个方

法。因为都是要完成几张图片在首页轮流展示,开发人员和测试人员都没有去关注图片的播放顺序是否正确。今天测试人员开出了一个bug,说页面在第一次载入

时,scrollable展示图片的顺序不对。显示的是最后一个,而且显示第二张图片时,实际图片是第二张图片,而不是第一张。因为很多情况下,我们会出

现表示当前第几张图片的小icon,如下图:

使用jQuery Tools scrollable注意事项

题来了,scrollable默认不是从第一张图片开始显示,而是:image 4->image

2->image3->image4。第一次不是显示的image 1。通过chrome develop

tools,显示的cloned的元素。如下:

使用jQuery Tools scrollable注意事项

本身scrollable插件生成class为cloned的元素,是为了动画循环显示,但是在这里浏览器把它作为第一张图片显示了。

代码如下:

目前修复的方式,延迟调用scrollable()方法。所以使用settimeout()进行2秒的延迟操作。

将上面的代码改为:

settimeout(function () {

$("#autoscroll").scrollable({ circular: true }).autoscroll({ autoplay: true });

},2000);

重新运行页面,发现正常。

继续阅读