最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
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");
相关文章
- 无限暖暖搭乘大鸟巴士怎么玩 公测第三天每日任务做法介绍 12-27
- 奇迹暖暖绚光护佑搭配攻略 奇迹暖暖绚光护佑过关攻略 12-27
- 绝区零月城柳意像影画怎么样 12-27
- 无限暖暖翩翩愿飞去怎么样 12-27
- 黑神话悟空1.0.12.16581版本更新公告 12-27
- 光遇12.27红石碎片在哪里 12-27