基於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/