无缝切换轮播图

轮播图大家都写过，但是怎么做到无缝切换对新手来说是个难点。
曾经也困惑了我很久，一直在研究，方法也很多，但是总是没有找到简便合适的。下面介绍一种。

html部分：

<div class="box">

  <ul>

    <li><img src="images/pic_01.jpg" width="630" height="210"></li>

    <li><img src="images/pic_02.jpg"  width="630" height="210"></li>

    <li><img src="images/pic_03.jpg"  width="630" height="210"></li>

    <li><img src="images/pic_04.jpg"  width="630" height="210"></li>

    <li><img src="images/pic_05.jpg"  width="630" height="210"></li>

  </ul>

  <a href="#" class="prev"><img src="images/arrow-prev.png" border="0"></a> 

  <a href="#" class="next"><img src="images/arrow-next.png" border="0"></a>

</div>

css部分：

.box{margin:0 auto; width:630px; height:210px;  position:relative; overflow:hidden;}

.box ul{list-style-type:none; padding:0; margin:0; position:absolute; top:0;left:0;  height:210px; }

.box li{float:left; width:630px;}

.prev{position:absolute; left:-2px; top:84px; }

.next{position:absolute; right:-2px; top:84px;}

js部分：

 $(function(){

     var w=630;

      var l=0;

      var timer=null;

      var len=$("ul li").length*2; //复制了一份图片，长度要设原来的2倍。
      // 页面一加载，就把ul定位到第二份的第一张图片

      //当图片位置到第一份图片第二张时，马上把图片定位到第二份的第一张,图片位置到最后一张时（第二份最后一张）时，就把图片定位到第一份最后一张,

     $("ul").append($("ul").html()).css({'width':len*w, 'left': -len*w/2});



   timer=setInterval(auto,5000);

    function auto(){

         $(".box .next").trigger('click');
    }

    $("ul li").hover(function(){

         clearInterval(timer);

        },function(){

            timer=setInterval(auto,5000);

       });


          $(".prev").click(function(){
              l=parseInt($("ul").css("left"))+w;  //这里要转成整数，因为后面带了px单位

             showCurrent(l); 

          });

          $(".next").click(function(){

             l=parseInt($("ul").css("left"))-w;  

             showCurrent(l);

          });

       function showCurrent(l){     //把图片的左右切换封装成一个函数

       if($("ul").is(':animated')){ //当ul正在执行动画的过程中，阻止执行其它动作。关键之处，不然图片切换显示不完全，到最后图片空白不显示。

          return;

       }

          $("ul").animate({"left":l},500,function(){

                if(l==0){ //当图片位置到第一份图片第二张时，马上把图片定位到第二份的第一张。注意这里的设置的css一定到写在animate动画完成时的执行 ,一定 要用css。

               $("ul").css("left",-len*w/2);   



             }else if(l==(1-len)*w){ //图片位置到最后一张时（第二份最后一张）时，就把图片定位到第一份最后一张。从而显示的是第一份最后一张。

                 $("ul").css('left',(1-len/2)*w); 

                }

            });       

         }



      });