#jQuery cxScroll
一款基于jQuery的无缝滚动插件，可自定义外观及调用参数，兼容主流浏览器。
版本：
- jQuery v1.4.4+
- jQuery cxScroll v1.2.1
注意事项：
- 内部会自动创建 prev 及 next 切换按钮，也可以在外部直接创建，若外部已创建或设置 prevBtn:false 及 nextBtn:false ，内部将跳过此步骤；
- 若（滚动的列表宽度 ≤ 父元素的宽度），则不会自动创建 prev 及 next 切换按钮，也不会自动滚动；
- 鼠标移动到滚动元素上时，会暂停滚动，移出后会恢复自动滚动（仅在设置 auto:true 时有效）。
文档：http://code.ciaoca.com/jquery/cxscroll/
示例：http://code.ciaoca.com/jquery/cxscroll/demo/
##【options 参数说明】
| 名称 | 默认值 | 说明 |
|---|---|---|
| direction | "right" | 滚动方向。可设置为："left"|"right"|"top"|"bottom" |
| easing | "swing" | 缓动方式 |
| step | 1 | 滚动步长 |
| accel | 160 | 手动滚动速度(ms) |
| speed | 800 | 自动滚动速度(ms) |
| time | 4000 | 自动滚动间隔时间(ms) |
| auto | true | 是否自动滚动 |
| prevBtn | true | 是否使用 prev 按钮 |
| nextBtn | true | 是否使用 next 按钮 |
| safeLock | true | 滚动时是否锁定控制按钮 |
##【使用方法】
###CSS 样式结构
/* 横向滚动参考样式 */
.cxscroll{position:relative;width:660px;height:120px;padding:10px;background-color:#eee;}
.cxscroll .box{overflow:hidden;position:relative;width:580px;height:120px;margin:0 auto;}
.cxscroll .list{overflow:hidden;width:9999px;}
.cxscroll .list li{float:left;width:200px;}
.cxscroll .prev,
.cxscroll .next{position:absolute;top:50%;margin-top:-25px;width:40px;height:50px;background-image:url(img/control.png);background-repeat:no-repeat;font:0/0 Arial;cursor:pointer;}
.cxscroll .prev{left:5px;background-position:0 0;}
.cxscroll .next{right:5px;background-position:-40px 0;}
.cxscroll .prev:hover{background-position:0 -50px;}
.cxscroll .next:hover{background-position:-40px -50px;}
/* 纵向滚动参考样式 */
.cxscroll{position:relative;width:180px;height:340px;padding:10px;background:#eee;}
.cxscroll .box{overflow:hidden;position:relative;top:40px;height:260px;}
.cxscroll .list{position:absolute;top:0;left:0;}
.cxscroll .list li{height:140px;text-align:center;}
.cxscroll .prev,
.cxscroll .next{position:absolute;left:50%;width:120px;height:30px;margin-left:-25px;width:50px;height:40px;background-image:url(img/control.png);background-repeat:no-repeat;font:0/0 Arial;cursor:pointer;}
.cxscroll .prev{top:5px;background-position:-80px 0;}
.cxscroll .next{bottom:5px;background-position:-130px 0;}
.cxscroll .prev:hover{background-position:-80px -40px;}
.cxscroll .next:hover{background-position:-130px -40px;}###DOM 结构
<div id="element_id" class="cxscroll">
<div class="box">
<ul class="list">
<li></li>
<li></li>
...
<li></li>
</ul>
</div>
<!-- 控制按钮内部会自动创建，可省略 -->
<a class="prev"></a>
<a class="next"></a>
</div>###调用 cxScroll
// 直接调用
$("#element_id").cxScroll();
// 自定义参数调用
$("#element_id").cxScroll({
direction:"right",
step:1,
accel:160,
speed:800,
time:4000,
auto:true,
prevBtn:true,
nextBtn:true,
safeLock:true
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent