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

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程