jQuery cxScroll 间歇式无缝滚动

载入 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();