2、插件API

2.1、插件配置

参数名称 默认值 参数说明
listSelector li
  1. 列表选择器
width 'auto'
  1. 容器宽度，超过隐藏
height 'auto'
  1. 容器高度，超过隐藏
direction 'top'
  1. 滚动方向
scrollCount 1
  1. 每次滚动的项目数量
  2. 如果为1，则每次滚动1个，暂停的时候会是某一个项目的结尾
  3. 如果为0，则无缝滚动，暂停的时候可能会是某一个项目的中间
delay 2000ms
  1. 延迟时间
duration 678ms
  1. 动画时间
  2. 如果滚动数量为0，则滚动全部数量的动画时间
isAutoPlay true
  1. 是否自动播放
isHoverPause true
  1. 是否鼠标悬停暂停
onbeforechange function
  1. 变化之前回调
  2. this => element
onafterchange function
  1. 变化之后回调
  2. this => element

2.2、插件方法

方法名称 方法描述
play
  1. 播放
  2. e.g. $('#demo').scrollable('play');
pause
  1. 暂停
  2. e.g. $('#demo').scrollable('pause');
prev
  1. 上一轮
  2. e.g. $('#demo').scrollable('prev');
next
  1. 下一轮
  2. e.g. $('#demo').scrollable('next');
  1. number项目索引值
  2. duration滚动时间
  3. function完成回调
  1. 滚动至第几个
  2. e.g. $('#demo').scrollable(1,100,function(){alert(1);});
3、插件演示

3.1、2个项目向上滚动

  1. 0单行项目
  2. 1多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目
  3. 2单行项目
  4. 3多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目
  5. 4单行项目
  6. 5单行项目
  7. 6多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目
  8. 7单行项目
  9. 8单行项目
  10. 9多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目
  11. 10单行项目
  12. 11单行项目
  13. 12单行项目

3.2、3个项目向下滚动

  1. 0单行项目
  2. 1多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目
  3. 2单行项目
  4. 3多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目
  5. 4单行项目
  6. 5单行项目
  7. 6多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目
  8. 7单行项目
  9. 8单行项目
  10. 9多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目
  11. 10单行项目
  12. 11单行项目
  13. 12单行项目

3.3、5个项目向左滚动

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

3.4、5个项目向右滚动

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

3.5、向右无缝滚动

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

3.6、向左无缝滚动

  • 1-水平滚动文字
  • 2-水平滚动文字
  • 3-水平滚动文字
  • 4-水平滚动文字
  • 5-水平滚动文字
  • 6-水平滚动文字
  • 7-水平滚动文字
  • 8-水平滚动文字
  • 9-水平滚动文字
  • 10-水平滚动文字
  • 11-水平滚动文字
  • 12-水平滚动文字
  • 13-水平滚动文字
  • 14-水平滚动文字
  • 15-水平滚动文字
  • 16-水平滚动文字

3.7、向上无缝滚动

  1. 1多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目
  2. 2单行项目
  3. 3多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目
  4. 4单行项目
  5. 5单行项目
  6. 6多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目
  7. 7单行项目
  8. 8单行项目
  9. 9多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目
  10. 10单行项目
  11. 11单行项目
  12. 12单行项目

3.8、向下无缝滚动

  1. 1多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目
  2. 2单行项目
  3. 3多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目
  4. 4单行项目
  5. 5单行项目
  6. 6多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目
  7. 7单行项目
  8. 8单行项目
  9. 9多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目多行项目
  10. 10单行项目
  11. 11单行项目
  12. 12单行项目

3.9、单行向上滚动

  1. 1111111111111111111111111111111111111111
  2. 2222222222222222222222222222222222222222
  3. 3333333333333333333333333333333333333333
  4. 4444444444444444444444444444444444444444
  5. 5555555555555555555555555555555555555555

3.10、单行向左滚动

  1. 1111111111111111111111111111111111111111
  2. 2222222222222222222222222222222222222222
  3. 3333333333333333333333333333333333333333
  4. 4444444444444444444444444444444444444444
  5. 5555555555555555555555555555555555555555