用Jquery 模仿一个tudou的头部广告图片轮转

参考网站：http://www.gmarwaha.com/  的一个JCarousel Lite 插件

 

先把js写出来给大家分析一下：

<script type="text/javascript">
$(function() {
    $(".anyClass").jCarouselLite({  /*jCarouselLite 插件是这个效果的关键*/
        btnNext: ".scrillRight",  /*单击向下图片滚动*/
        btnPrev: ".scrollLeft", /*单击向上图片滚动*/
        auto: 800,                 /*自动滚动*/
        speed: 1000             /*速度*/
    });
});
</script>

结构：

 

<div class="border">
 <span class="prev scrollLeft" ></span> /*向上按钮*/       
  <div class="anyClass">
      <ul>
       <li><a href="#"><img src="big_01.jpg"/></a></li>    /*滚动的图片*/
      <li><a href="#"><img src="big_02.jpg"/></a></li>
      <li><a href="#"><img src="big_03.jpg"/></a></li>
      </ul>
  </div>
 <span class="next scrillRight"></span> /*向下按钮*/   
</div>

 

需要看效果的，请看附件DEMO :