利用数组实现无缝轮播

    一般的图片轮播切换实现起来并不难，瞬间切换的轮播只需在点击按钮时先让所有的图片隐藏，再让对应索引的图片显示，难点在于平移类型的轮播，在最后一张，第一张图片继续切换时，我们看起来图片就是首尾相连的，但实际上我们并不能把图片真的首尾相连，这只能靠我们自己来实现首尾相连的视觉效果。

    1.比如有5张图片轮播，我们可以将第一张图片复制一份到最后，最后一张图片复制到第一张之前，这样在最后一张图片继续平移时，看起来实现了循环，但接下来就出现空白了，我们可以继续复制图片，但我们总不能为了多次循环而复制多次，因此我们可以在最后一张向所谓的第一张平移完成后立即将图片列表的位置切换到真正的第一张图的位置，用户还没来得及点击右键头，图片就已经偷天换日了。点击另一个反向的键头时反之。这样便实现了所谓的无缝轮播。
    2.方式一的代码总显得冗余，明明只有5张图，却还要多写两条图片的代码。我们对首尾图片的处理可以是：每平移一次结束后就立即将第一张图片调到最后，这里我们利用数组，

<style>
ul,li{list-style:none;margin:0;padding:0;}
img {width:200px;}
li{float:left;position:relative;}
#Toggle_box{width:200px;position:relative;margin:auto;overflow:hidden;}
#pic_list{width:1000px;position:relative;left:-200px;}
.Arrow{width:60px;height:330px;position:absolute;background-repeat:no-repeat;}
.ArrowLeft{background-image:url(images/left.png);left:0;}
.ArrowRight{background-image:url(images/right.png);right:0;}
.ArrowLeft:hover{background-image:url(images/left_hover.png);}
.ArrowRight:hover{background-image:url(images/right_hover.png);}
style>


<div id="Toggle_box">
  <ul id="pic_list">
      <li><img src="images/Huawei1.jpg" />li>    
      <li><img src="images/Huawei2.jpg" />li>    
      <li><img src="images/Huawei3.jpg" />li>    
      <li><img src="images/Huawei4.jpg" />li>    
      <li><img src="images/Huawei5.jpg" />li>    
  ul>
<div class="Arrow ArrowLeft" onclick="LeftMove()">div>
<div class="Arrow ArrowRight" onclick="RightMove()">div>
div>

<script>

var arr=
[
    ' 
' ,   
    ' 
' ,   
    ' 
' ,   
    ' 
' ,   
    ' 
' , 
];
function RightMove(){
    $('#pic_list').animate({left:'-=200px'},500,function(){
        arr.push(arr[0]);
        arr.shift(arr[0]);
        $(this).html(arr);
        $(this).css('left',0);
    });
}
script>

    shift,push 实现了arr中第一到倒一的切换，然而这只是arr数组，于是我们将arr写入图片列表#pic_list，然此时我们发现图片是两张两张的切换，这也不难理解，因为图片列表位置左移了一个图片的宽度，列表中图片又完成了第一张到最后一张的切换，那么第二张图片会跑到列表左边缘，而左边缘相比初始时已经左移一个图的宽度，看起来图片就是两张两张的切换，因此我们再加一步：把列表再右移一个图的宽度，这样看起来就是一张一张的切换了。我们把另一个方向的代码写出来：

function LeftMove(){
    $('#pic_list').animate({left:'+=200px'},speed,function(){
        arr.unshift(arr[arr.length-1]);
        arr.pop();
        $(this).html(arr);
        $(this).css('left',0);
    });
}//图片宽度200px

    代码正确但第一张图片左侧实际上没图片，先让列表平移会出现空白，先将最后一张图片放到第一张图左侧也不对，因为这个过程是一瞬间的，不是平移效果。我们考虑重写代码，调整图片顺序，在html里面把最后一张放到第一张图的位置，让其他图片依次向后挤一个图的宽，再把列表的初始left设为-200（一个图的宽），其他对应数据也都变动200，那么两个方向的切换就都实现了。新html：

      <li><img src="images/Huawei5.jpg" />li>    
      <li><img src="images/Huawei1.jpg" />li>    
      <li><img src="images/Huawei2.jpg" />li>   
      <li><img src="images/Huawei3.jpg" />li>    
      <li><img src="images/Huawei4.jpg" />li>     

    我们考虑优化代码，如果图片有很多张，或者我们想复用这些代码，arr和图片列表里面的内容是重复的，arr和图片列表的html只是格式不一样。我们却要写两次
 ，我们利用数组的技巧： 

var arr2=$('#pic_list').html().split('');
arr2.length-=1;
var arr=[];
for(m=0;mlength;m++){
    arr[m]=arr2[m]+''; 
}
//把pic_list里的代码用''隔开，此时arr2里面有一个我们不希望的数据：用''隔开$('#pic_list').html()的时候，最后的''的最后还有一个数据，空格，因为arr2长度可写，因此把它的长度减一，相当于把最后一个给删了。然后arr2里面东西是缺失的：少了''，因此我们利用for循环为每一个' 
'之后添加 '
',储存到新数组里面（arr）,这样就完成了‘无缝轮播’。 
</script>

    在最后加上定时器，实现自动轮播：

<script>
var timer=setInterval(RightMove,3000);
$('#Toggle_box').hover(
    function(e) {
        clearInterval(timer);    
    },
    function(e) {
        timer=setInterval(RightMove,3000);
    }
);
script>