jQueryTools Scrollable详解

在网页中加入各式各样的轮播广告都可以归结为滑动块的灵活使用，而jQueryTools提供了一套非常方便的滑动块解决方案，基本可以实现任何网页上的轮播图片或图片浏览功能。
滑动块设置说明(scrollable)

属性	默认值	说明
clonedClass	'cloned'	当循环滑动时程序会自动复制一组滑动单元以便平滑连接第一个或最后一个元素，此时复制后的这一组滑动单元还会增加一个CSS类名，默认为'cloned'
disabledClass	"disabled"	如果没有开启循环滑动，则滑动到第一个或最后一个元素时相应的向前、向后按钮会自动切换成此CSS类名
easing	"swing"	'swing' 滑动时会有加速度效果, 'linear' 则是匀速滑动
items	".items"	滑动区根元素，作为滑动单元的容器，使用jQuery选择器。此元素尽量简单比较好，一个简单的DIV元素就可以了。
keyboard	true	是否支持键盘方向键控制，水平滑动区使用左右键，垂直滑动区使用上下键。如果为true则当滑动区获得焦点之后可以监控键盘事件，可以在程序中使用focus()强制获取焦点。自1.1.0版本之后还可以支持'static'，无论是否获取到焦点都会监控键盘事件。合理利用'static'和true属性值可以制作同时包含上下或左右滑动的滑区，如：A complete scrollable navigational system
circular	false	是否循环滑动
next	".next"	向后按钮，使用jQuery选择器
prev	".prev"	向前按钮，使用jQuery选择器
speed	400	滑动动画时长，毫秒
vertical	false	是否垂直滑动

导航插件属性设置说明(navigator)

属性	默认值	说明
activeClass	"active"	导航激活时的CSS类名
idPrefix		自1.1.2版本以后，可以设置导航ID前缀，如设置"foo"，则自动为导航添加"foo0", "foo1", "foo2"作为每个页码的ID
indexed	false	如果启用该选项，则自动填充导航仪元素的索引号。
history	false	自1.2.0版本以后，配合 History tool 可以使浏览器的后退按钮成为滑动区的后退按钮。
navi	".navi"	导航容器根节点选择器
naviItem		导航元素选择器

自动滑动设置说明(Scrollable autoscrolling)

属性	默认值	说明
steps	1	每次滑动移动多少个滑块单元
interval	1000	滑动间隔时间，毫秒
autoplay	true	是否自动播放，如果设置为false，则需要调用JavaScript API进行播放
autopause	true	鼠标悬停时是否自动暂停

Scrollable简单使用方法

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

一个稍微复杂点的垂直+水平嵌套滑动的例子：



在此例子中，按上下键可以垂直滑动"垂直滑动组"并且切换"水平滑动组"，按左右键可以滑动"水平滑动组"，详见A complete scrollable navigational system

$(document).ready(function() {
//主垂直划区
$("#main").scrollable({
// 设置为垂直滑动
vertical: true,
// 始终监控上下按键
keyboard: 'static',
// 当滑动后将焦点设置为当前水平滑区
onSeek: function(event, i) {
horizontal.eq(i).data("scrollable").focus();
}
// 导航
}).navigator("#main_navi");
// 水平划区
var horizontal = $(".scrollable").scrollable({ circular: true }).navigator(".navi");
// 当页面载入时将焦点设置为第0个水平滑区
horizontal.eq(0).data("scrollable").focus();
});

Seagram Building
New York City, United States



Barcelona Pavilion
Barcelona, Spain



New National Gallery
Berlin, Germany