jquery scrollable无限无缝循环滚动使用示例

1、插件介绍

支持无限无缝循环滚动。
最小的限度的操作DOM，只在初始化的时候复制一次DOM，后续不会再操作DOM，最大化性能。
默认的DOM结构为：#demo>ul>li*n。
丰富配置、简单接口。
注意：无缝滚动不支持prev、next操作，不支持onbeforechange、onafterchange回调。

2、插件参数

// 默认参数
$.fn.scrollable = {
 // 内容区域选择器
 contentSelector: "ul",
 // 宽度，超过隐藏
 width: "auto",
 // 高度，超过隐藏
 height: "auto",
 // 滚动方向
 direction: "top",
 // 每次滚动的项目数量
 // 如果为1，则每次滚动1个，暂停的时候会是某一个项目的结尾
 // 如果为0，则无缝滚动，暂停的时候可能会是某一个项目的中间
 scrollNum: 1,
 // 延迟时间
 delay: 2000,
 // 动画时间，如果滚动数量为0，则滚动全部数量的动画时间
 duration: 678,
 // 是否自动播放
 isAutoPlay: true,
 // 是否鼠标悬停暂停
 isHoverPause: true,
 // 变化之前回调
 onbeforechange: emptyFn,
 // 变化之后回调
 onafterchange: emptyFn
};

3、插件控制

// 3.1、滚动到
$("#demo").scrollable(index[, duration][, callback]);
 
// 3.2、播放
$("#demo").scrollable("play");
 
// 3.3、暂停
$("#demo").scrollable("pause");
 
// 3.4、前
$("#demo").scrollable("prev");
 
// 3.5、后
$("#demo").scrollable("next");