一聚教程网:一个值得你收藏的教程网站

热门教程

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

时间:2022-06-25 17:42:52 编辑:袖梨 来源:一聚教程网

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");

热门栏目