jquery tools 系列 scrollable学习

代码如下:

<!-- navigator -->
<div class="navi"></div>
<!-- prev link -->
<a class="prev"></a>
<!-- root element for scrollable -->
<div class="scrollable">
<div id="thumbs">
<div>
<img src="http://static.flowplayer.org/img/demos/thumbs/thumb5.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb5.jpg" />
<h3><em>1. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">60 sec</span>
</div>
<div>
<img src="http://static.flowplayer.org/img/demos/thumbs/thumb6.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb6.jpg" />
<h3><em>2. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">80 sec</span>
</div>
<div>
<img src="http://static.flowplayer.org/img/demos/thumbs/thumb7.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb7.jpg" />
<h3><em>3. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">100 sec</span>
</div>
<div>
<img src="http://static.flowplayer.org/img/demos/thumbs/thumb8.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb8.jpg" />
<h3><em>4. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">120 sec</span>
</div>
<div>
<img src="http://static.flowplayer.org/img/demos/thumbs/thumb9.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb9.jpg" />
<h3><em>5. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">140 sec</span>
</div>
</div>
</div>
<!-- next link -->
<a class="next"></a>
<!-- let rest of the page float normally -->
<br clear="all" />

该功能是通过jqueryObject.scrollable()方法来实现的，其中scrollable方法提供以下两种方式：
1. $("div.scrollable").scrollable//该方法为采用默认方法显示滚动栏
2. $("div.scrollable").scrollable({config object}) //该方法通过配置对象来定制滚动栏显示内容及方式。
以下代码为第二种方式的配置参数实现（只需将该实现放于jquery的ready方法中即可）：


代码如下:

$("div.scrollable").scrollable({
        size: 3,
        vertical:false,
        //clickable:false,
        loop:true,//设置是否自动跳转（根据间隔时间）
        //interval: 1000,//设置间歇时间间隔
        //speed:2000,
        items: '#thumbs',
        //prev:'.prev',//跳转到上一项
        //next:'.next'//跳转到下一项
        prevPage:'.prev',//跳转到上一页
        nextPage:'.next',//跳转到下一页
        hoverClass: 'hover',
        easing:'linear'
    });

下面对scrollable配置参数描述如下：