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" /
h3em1. /emAn 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" /
h3em2. /emAn 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" /
h3em3. /emAn 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" /
h3em4. /emAn 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" /
h3em5. /emAn 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配置参数描述如下：