项 目开发中一直使用jQuery Tools中scrollable插件，一直也只是停留在使用上，最多看文档实现如何调用它的prev(spped)和next(speed)等几个方 法。因为都是要完成几张图片在首页轮流展示，开发人员和测试人员都没有去关注图片的播放顺序是否正确。今天测试人员开出了一个bug，说页面在第一次载入 时，scrollable展示图片的顺序不对。显示的是最后一个，而且显示第二张图片时，实际图片是第二张图片，而不是第一张。因为很多情况下，我们会出 现表示当前第几张图片的小icon，如下图：
![clip_image001[4]](http://images.cnitblog.com/blog/59618/201304/07213539-0bbba2b86cb94066bdb01862bc6dfa63.png "clip_image001[4]")
问 题来了，scrollable默认不是从第一张图片开始显示，而是：image 4->image 2->image3->image4。第一次不是显示的image 1。通过chrome develop tools，显示的cloned的元素。如下：
![clip_image002[4]](http://images.cnitblog.com/blog/59618/201304/07213540-f7f4594dd95145fa8533c52f20107c01.png "clip_image002[4]")
本身scrollable插件生成class为cloned的元素，是为了动画循环显示，但是在这里浏览器把它作为第一张图片显示了。
代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Tools Scrollable使用注意事项</title>
<!--jQuery Tools CDN-->
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<style type="text/css">
#itemsContainer {
margin:0 auto;
width:600px;
height:600px;
}
.scrollable {
position:relative;
overflow:hidden;
width:430px;
height:180px;
}
.scrollable .items {
width:2000em;
position:absolute;
}
.items div {
float:left;
}
</style>
</head>
<body>
<div id="itemsContainer">
<!-- root element for scrollable -->
<div class="scrollable" id="autoscroll">
<!-- root element for the items -->
<div class="items">
<!-- image 1 -->
<div>
<img src="images/google1.png" />
</div>
<!-- image 2 -->
<div>
<img src="images/google2.png" />
</div>
<!-- image 3 -->
<div>
<img src="images/google3.png" />
</div>
<div>
<img src="images/google4.png" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#autoscroll").scrollable({ circular: true }).autoscroll({ autoplay: true });
//setTimeout(function () {
// $("#autoscroll").scrollable({ circular: true }).autoscroll({ autoplay: true });
//},2000);
});
</script>
</body>
</html>
目前修复的方式，延迟调用scrollable()方法。所以使用setTimeout()进行2秒的延迟操作。
将上面的代码改为：
setTimeout(function () {
$("#autoscroll").scrollable({ circular: true }).autoscroll({ autoplay: true });
},2000);
重新运行页面，发现正常。
