夏日博客

A-A+

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

2016年01月11日 前端设计 暂无评论 阅读 6 views 次

无限无缝循环滚动效果现在用到的相对不多了，特别是在以前有一段时间无限无缝循环滚动效果用到的非常的多了，下面小编来为各位介绍一个 scrollable无限无缝循环滚动使用示例

1、插件介绍

支持无限无缝循环滚动。

最小的限度的操作DOM，只在初始化的时候复制一次DOM，后续不会再操作DOM，最大化性能。

默认的DOM结构为：#demo>ul>li*n。

丰富配置、简单接口。

注意：无缝滚动不支持prev、next操作，不支持onbeforechange、onafterchange回调。

2、插件参数

  1. // 默认参数  
  2. $.fn.scrollable = {  
  3.  // 内容区域选择器  
  4.  contentSelector: "ul",  
  5.  // 宽度，超过隐藏  
  6.  width: "auto",  
  7.  // 高度，超过隐藏  
  8.  height: "auto",  
  9.  // 滚动方向  
  10.  direction: "top",  
  11.  // 每次滚动的项目数量  
  12.  // 如果为1，则每次滚动1个，暂停的时候会是某一个项目的结尾  
  13.  // 如果为0，则无缝滚动，暂停的时候可能会是某一个项目的中间  
  14.  scrollNum: 1,  
  15.  // 延迟时间  
  16.  delay: 2000,  
  17.  // 动画时间，如果滚动数量为0，则滚动全部数量的动画时间  
  18.  duration: 678,  
  19.  // 是否自动播放  
  20.  isAutoPlay: true,  
  21.  // 是否鼠标悬停暂停  
  22.  isHoverPause: true,  
  23.  // 变化之前回调  
  24.  onbeforechange: emptyFn,  
  25.  // 变化之后回调  
  26.  onafterchange: emptyFn  
  27. };  

3、插件控制

  1. // 3.1、滚动到  
  2. $("#demo").scrollable(index[, duration][, callback]);  
  3.    
  4. // 3.2、播放  
  5. $("#demo").scrollable("play");  
  6.    
  7. // 3.3、暂停  
  8. $("#demo").scrollable("pause");  
  9.    
  10. // 3.4、前  
  11. $("#demo").scrollable("prev");  
  12.    
  13. // 3.5、后  
  14. $("#demo").scrollable("next");  
标签：

给我留言