jQuery cxScroll 间歇式无缝滚动

• 版本：
• jQuery v1.7+
• jQuery cxScroll v1.2.2
• 注意事项：
• 内部会自动创建 prev 及 next 切换按钮，也可以在外部直接创建，若外部已创建或设置prevBtn: false及nextBtn: 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'	缓动方式
step	1	滚动步长
accel	200	手动滚动速度 (ms)，点击控制按钮滚动的速度。
speed	800	自动滚动速度 (ms)
time	4000	自动滚动间隔时间 (ms)
auto	true	是否自动滚动
hoverLock	true	鼠标移入移出锁定。鼠标进入区域内时停止自动轮播，离开后恢复自动轮播（仅在 auto 为 true 时有效）
prevBtn	true	是否使用 prev 按钮
nextBtn	true	是否使用 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)

 

---

下载