基于jquery.cxscroll的无缝滚动

版本：

jQuery v1.4.4+

jQuery cxScroll v1.2.1

注意事项：

内部会自动创建 prev 及 next 切换按钮，也可以在外部直接创建，若外部已创建或设置 prevBtn: false及 nextBtn: false，内部将跳过此步骤；

若（滚动的列表宽度 ≤ 父元素的宽度），则不会自动创建 prev 及 next 切换按钮，也不会自动滚动；

鼠标移动到滚动元素上时，会暂停滚动，移出后会恢复自动滚动（仅在设置auto: true时有效）。

使用方法

载入 JavaScript 文件

<script src="jquery.js"></script> 
<script src="jquery.cxscroll.js"></script>

CSS 样式结构

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

/* 横向滚动基本样式 */ 
.cxscroll{} 
.cxscroll .box{overflow:hidden;width:600px;} 
.cxscroll .list{overflow:hidden;width:9999px;} 
.cxscroll .list li{float:left;width:200px;height:100px;} 
.cxscroll .prev{} 
.cxscroll .next{} 
 
/* 纵向滚动基本样式 */ 
.cxscroll{} 
.cxscroll .box{overflow:hidden;height:300px;} 
.cxscroll .list{} 
.cxscroll .list li{height:100px;} 
.cxscroll .prev{} 
.cxscroll .next{} 

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

$('#pic_list_3').cxScroll({
    direction: 'bottom',
    speed: 500,
    time: 1500,
    plus: false,
    minus: false
});

参数说明

名称	默认值	说明
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	滚动时是否锁定控制按钮

来自：http://code.ciaoca.com/jquery/cxscroll/