演示效果：

代码下载：点击下载

IE兼容模式下, 图片周边有蓝色边框, 问题处在于img的重置样式上, 添加个img{border:none;}问题即可解决.

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

参数说明