jQuery间歇式无缝滚动插件cxScroll

使用方法：

引入jQuery库文件、JavaScript插件文件

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.cxscroll.min.js"></script>

插件初始化、参数配置

$("#pic_list_1").cxScroll();

HTML结构

<div id="pic_list_1" class="scroll_horizontal">
  <div class="box">
      <ul class="list">
        <li><a href="#"><img src="img/temp_pic_1.jpg"></a></li>
        <li><a href="#"><img src="img/temp_pic_2.jpg"></a></li>
        <li><a href="#"><img src="img/temp_pic_3.jpg"></a></li>
        <li><a href="#"><img src="img/temp_pic_4.jpg"></a></li>
        <li><a href="#"><img src="img/temp_pic_5.jpg"></a></li>
      </ul>
  </div>
</div>

CSS样式

/* 横向滚动
------------------------------ */
.scroll_horizontal{position:relative;width:660px;height:120px;padding:10px;background-color:#eee;}
.scroll_horizontal .box{overflow:hidden;position:relative;width:580px;height:120px;margin:0 auto;}
.scroll_horizontal .list{overflow:hidden;width:9999px;}
.scroll_horizontal .list li{float:left;width:200px;}
.scroll_horizontal .prev,
.scroll_horizontal .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;}
.scroll_horizontal .prev{left:5px;background-position:0 0;}
.scroll_horizontal .next{right:5px;background-position:-40px 0;}
.scroll_horizontal .prev:hover{background-position:0 -50px;}
.scroll_horizontal .next:hover{background-position:-40px -50px;}

参数说明

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 按钮