輪播圖大家都寫過，但是怎麼做到無縫切換對新手來說是個難點。
曾經也困惑了我很久，一直在研究，方法也很多，但是總是沒有找到簡便合適的。下面介紹一種。

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); 

                }

            });       

         }



      });