var scrollable=$("div.scrollable").scrollable();
//alert(scrollable.getConf().prev);//获取配置对象中的prev属性
scrollable.getConf().speed=200;//设置配置对象的speed属性
//alert(scrollable.getIndex());//获取当前滚动项的索引
//alert(scrollable.getItems().length);//获取当前滚动项的数量
//alert(scrollable.getItemWrap().html());//获取包含滚动项的节点(class=scrollable),并将所有滚动项显示出来
//alert(scrollable.getPageAmount());//获取当前滚动栏分页数
//alert(scrollable.getPageIndex());//获取当前所在分页
//alert(scrollable.getRoot().html());//获取滚动项的上一级节点(id=thumbs)
//alert(scrollable.getSize());
//alert(scrollable.getVisibleItems().length);//获取当前可见滚动项数量
scrollable.next();//如果有下一个滚动项,则跳转到下一个滚动项
scrollable.prev(3000,function(){return true});//跳转到前一滚动项
//var seekTo= scrollable.click(0).seekTo(2,1000,function(){
//alert(this.getIndex());
//});
//scrollable.move(2);
//scrollable.prevPage();//跳转到前一页
//scrollable.nextPage();//跳转到下一页
//scrollable.setPage(1);//跳转到下一页
//scrollable.begin();//跳转到第一个滚动项
//scrollable.end();//跳转到最后一个滚动项
scrollable.click(3);//使第四个滚动项处于选中状态
scrollable.onBeforeSeek(function(){
alert("you click the "+this.getIndex()+"st scrollable item!");
});
$("#remove").click(function(){
scrollable.getItems().filter(":last").remove();//删除最后一个滚动项
scrollable.reload().prev();//自动更新相关配置信息,并跳转到被删除滚动项的前一项
});
以下是scrollable对象的方法说明描述:
方法名称 | 返回值 | 说明 |
getConf() | Object | 返回scrollable的配置对象,并且可通过设置该对象的相关属性值来修改该配置对象的属性。 |
getIndex() | number | 获取当前滚动项的索引号,0代表第一个元素,1代表第二个元素,以此类推。此外,需注意的是,如果获取到多个滚动项,那么将会只返回第一个滚动项的索引号。 |
getItems() | jQuery | 返回所有的滚动项,结果以jquery对象的方式返回。 |
getItemWrap() | jQuery | 获取滚动项的父节点,结果以jquery对象的方式返回。 |
getPageAmount() | number | 获取当前滚动栏的分页数。 |
getPageIndex() | number | 返回当前分页索引号。比如说,如果分页设置为5个滚动项/页,并且当前滚动项位置为7的话,那么将会返回1(第二页) |
getRoot() | jQuery | 获取滚动项的上一级节点。 |
getSize() | number | 返回滚动项的数量。该方法等同于getConf().size |
getVisibleItems() | jQuery | 获取一个由当前可见滚动项组成列表,该列表为一个jquery对象,可见滚动项的数量由配置对象的size属性定义。 |
reload() | API | scrollable支持动态添加和删除滚动项的功能。在动态添加或删除滚动项以后,调用此方法来自动更新分页导航以及滚动项移动的相关信息。 |
prev() | API | 跳转到该滚动项的前一项(如果该滚动项不是第一个滚动项) |
next() | API | 跳转到该滚动项的下一项(如果该滚动项不是最后一个滚动项) |
seekTo(index) | API | 跳转到指定索引处的滚动项。 |
move(offset) | API | 将处于当前状态(激活)的滚动项位置由当前滚动项向前/后移动offset。Offset为正,则滚动项向右/下移动,否则,向左/上移动。比如:move(2),则处于当前状态的滚动项的索引由i滚动项转移至i+2滚动项。 |
prevPage() | API | 跳转到前一页(如果该页不是第一页)。 |
nextPage() | API | 跳转到后一页(如果该页不是最后一页)。 |
setPage(index) | API | 跳转到第index页。比如,index=2,那么会从当前页跳转到第3页。 |
movePage(offset) | API | 用于将显示页的位置由当前页切换到该页/后offset页,该方法其他解释类似于(offset)。 |
begin() | API | 跳转到第一个滚动项,相当于seekTo(0)。 |
end() | API | 跳转到最后一个滚动项。 |
click(index) | API | 使第index个滚动项处于选中(激活)状态。 |
onBeforeSeek(fn) | API | 参见配置对象的onBeforeSeek相关说明 |
onSeek(fn) | API | 参见配置对象的onSeek相关说明 |
最后,给出本scrollable系列的完整示例代码:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1. An example title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
60 sec
2. An example title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
80 sec
3. An example title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
100 sec
4. An example title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
120 sec
5. An example title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
140 sec