你的位置:首页 > Java教程

[Java教程]jQuery cxScroll 间歇式无缝滚动


  • 版本:
  • jQuery v1.7+
  • jQuery cxScroll v1.2.2
  • 注意事项:
  • 内部会自动创建 prev 及 next 切换按钮,也可以在外部直接创建,若外部已创建或设置prevBtn: falsenextBtn: false,内部将跳过此步骤;
  • 若(滚动的列表宽度 ≤ 父元素的宽度),则不会自动创建 prev 及 next 切换按钮,也不会自动滚动。
  • github地址

在线实例

实例预览 基础示例

实例预览 参数示例

实例预览 API 接口


使用方法

载入 JavaScript 文件

  1. <script src="jquery.js"></script> 
  2. <script src="jquery.cxscroll.js"></script>
复制

CSS 样式结构

除必要属性设置外,其他样式均可自行设置。

  1. /* 横向滚动基本样式 */ 
  2. .cxscroll{} 
  3. .cxscroll .box{overflow:hidden;width:600px;} 
  4. .cxscroll .list{overflow:hidden;width:9999px;} 
  5. .cxscroll .list li{float:left;width:200px;height:100px;} 
  6. .cxscroll .prev{} 
  7. .cxscroll .next{} 
  8.  
  9. /* 纵向滚动基本样式 */ 
  10. .cxscroll{} 
  11. .cxscroll .box{overflow:hidden;height:300px;} 
  12. .cxscroll .list{} 
  13. .cxscroll .list li{height:100px;} 
  14. .cxscroll .prev{} 
  15. .cxscroll .next{} 
复制

DOM 结构

  1. <div id="element_id" class="cxscroll"> 
  2.   <div class="box"> 
  3.     <ul class="list"> 
  4.       <li></li> 
  5.       <li></li> 
  6.       ... 
  7.       <li></li> 
  8.     </ul> 
  9.   </div> 
  10.   <!-- 控制按钮会自动创建,可省略 --> 
  11.   <a class="prev"></a> 
  12.   <a class="next"></a> 
  13. </div> 
复制

调用 cxScroll

  1. $('#element_id').cxScroll();
复制

参数说明

名称默认值说明
direction'right'滚动方向。可设置为:"left", "right", "top", "bottom"
easing'swing'缓动方式
step1滚动步长
accel200手动滚动速度 (ms),点击控制按钮滚动的速度。
speed800自动滚动速度 (ms)
time4000自动滚动间隔时间 (ms)
autotrue是否自动滚动
hoverLocktrue鼠标移入移出锁定。鼠标进入区域内时停止自动轮播,离开后恢复自动轮播(仅在 auto 为 true 时有效)
prevBtntrue是否使用 prev 按钮
nextBtntrue是否使用 next 按钮

API 接口

  1. var Api; 
  2. $('#element_id').cxScroll(function(api){ 
  3.   Api = api; 
  4. }); 
  5. // 或者作为第二个参数传入 
  6. $('#element_id').cxScroll({ 
  7.   minus: true, 
  8.   plus: true 
  9. }, function(api){ 
  10.   Api = api; 
  11. });
复制

         

名称说明
play()开始自动播放
stop()停止自动播放
prev(speed)向前滚动。speed 为滚动速度(ms)
next(speed)向后滚动。speed 为滚动速度(ms)