jQuery cxScroll 间歇式无缝滚动

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

var Api;
$('#element_id').cxScroll(function(api){
  Api = api;
});
// 或者作为第二个参数传入
$('#element_id').cxScroll({
  minus: true,
  plus: true
}, function(api){
  Api = api;
});