使用函数递归实现图片滑动切换，采用辅助图片实现图片无限滚动等技巧。
假如前后不加一张图片的话，图片顺序为[1,2,3,4,5]，当你点到第 5 张图时，再点“下一张”（就是要回到第 1 张图那里），这时候，你想象下那个画面，会一瞬间“刷刷刷”地闪过中间那几张图片才能到第 1 张图那里，这样，太难看了吧。
为了解决这个问题，所以要在第 5 张那里加多一张 1 图，图片顺序为 [1,2,3,4,5,1]。当你在第 5 张图点下一张时，图片滚动顺序是这样的：5 ----> (1) ----> 1，（注：中间的那个 1 是指后面多加的 1 图），一旦到了那个“多加的 1 图”，轮播就会瞬间回到 前面的 1 图那里。
因为都是“1 图”，所以视觉上不会有那个一次“刷刷刷”闪过好几张图片的效果。
效果如图：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 text-decoration: none; 12 } 13 .wrap{ 14 width: 490px; 15 height: 170px; 16 margin: 100px auto; 17 border: 1px solid #000000; 18 position: relative; 19 overflow: hidden; 20 } 21 #pic{ 22 width: 3430px; 23 position: absolute; 24 } 25 #pic li{ 26 float: left; 27 height: 170px; 28 } 29 #list{ 30 position: absolute; 31 bottom: 10px; 32 left:150px ; 33 } 34 #list li{ 35 float: left; 36 width: 15px; 37 height: 15px; 38 background: #fff; 39 margin: 0 10px; 40 border-radius: 50%; 41 cursor: pointer; 42 } 43 #list .on{ 44 background: #e27a00; 45 } 46 .Prev{ 47 top: 30px; 48 left: 0; 49 } 50 .Next{ 51 top: 30px; 52 right: 0; 53 } 54 .Prev,.Next{ 55 position: absolute; 56 font-size: 80px; 57 font-weight: bold; 58 color:#fff ; 59 -webkit-transition: all 0.35s ease-in-out 60 } 61 .Next:hover, 62 .Prev:hover{ 63 background: #ccc; 64 background: rgba(204, 204, 204, 0.4); 65 } 66 67 </style> 68 <script type="text/javascript"> 69 window.onload=function(){ 70 var wrap=document.getElementById('wrap'); 71 var pic=document.getElementById('pic'); 72 var Li=document.getElementById('list').getElementsByTagName('li'); 73 var prev=document.getElementById('Prev'); 74 var next=document.getElementById('Next'); 75 var animated=false; 76 var index=0; 77 var timer=null; 78 next.onclick=function(){ 79 if(animated){//如果图片正在滚动时要返回，否则index会变化 80 return; 81 } 82 else{ 83 index++; 84 if(index>=Li.length){ 85 index=0; 86 } 87 } 88 89 showlist(); 90 if(animated == false){//if(!animated) 91 animate(-490); 92 } 93 } 94 prev.onclick=function(){ 95 if(animated){ 96 return; 97 } 98 else{ 99 index--; 100 if(index<=0){ 101 index=Li.length-1; 102 } 103 } 104 105 showlist(); 106 if(!animated){//判断其是否滚动完 107 animate(490); 108 } 109 } 110 for(var i=0;i<Li.length;i++){ 111 Li[i].num=i; 112 Li[i].onclick=function(){ 113 if(this.className=="on"){ 114 return; 115 } 116 var offset = -490*(this.num-index); 117 if(!animated){ 118 animate(offset); 119 } 120 index=this.num; 121 showlist(); 122 } 123 } 124 //图片变换 125 function animate(offset){ 126 animated=true; 127 var newLeft=parseInt(pic.style.left) + offset; 128 var time=300//位移总时间 129 var interval=10;//位移间隔时间 130 var speed=offset/(time/interval);//每次位移量 131 132 function go(){ 133 if((speed < 0 && parseInt(pic.style.left) > newLeft )|| (speed > 0 && parseInt(pic.style.left) < newLeft)){ 134 pic.style.left = parseInt(pic.style.left) + speed + 'px'; 135 setTimeout(go,interval); 136 }else{ 137 animated=false; 138 pic.style.left= newLeft + 'px'; 139 if(newLeft > -490){ 140 pic.style.left = -2450 + 'px'; 141 } 142 if(newLeft < -2450){ 143 pic.style.left = -490 + 'px'; 144 } 145 } 146 } 147 go(); 148 } 149 //圆点变换 150 function showlist(){ 151 for(var i=0;i<Li.length;i++){ 152 Li[i].className=""; 153 } 154 Li[index].className="on"; 155 } 156 //自动播放 157 function play(){ 158 timer=setInterval(function(){ 159 next.onclick(); 160 },2000); 161 } 162 function stop(){ 163 clearInterval(timer); 164 } 165 wrap.onmouseover=stop; 166 wrap.onmouseout=play; 167 play(); 168 } 169 </script> 170 </head> 171 <body> 172 <div class="wrap" id="wrap"> 173 <ul id="pic" style="left: -490px;"> 174 <li><a href="#"><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt="5"/></a></li> 175 <li><a href="#"><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt="1"/></a></li> 176 <li><a href="#"><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt="2"/></a></li> 177 <li><a href="#"><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt="3"/></a></li> 178 <li><a href="#"><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt="4"/></a></li> 179 <li><a href="#"><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt="5"/></a></li> 180 <li><a href="#"><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt="1"/></a></li> 181 </ul> 182 <ul id="list"> 183 <li class="on"></li> 184 <li></li> 185 <li></li> 186 <li></li> 187 <li></li> 188 </ul> 189 <a href="javascript:;" class="Prev" id="Prev"><</a> 190 <a href="javascript:;" class="Next" id="Next">></a> 191 </div> 192 </body> 193 </html>
同理（点“上一张”），要在 1 图前加一个 5 图。