兩種圖片輪播實現方案，先來看效果對比：
方案一：
原理：將圖片擺成一行，從左到右依次滾動進入視野，當滾動到最后一張時，從右到左滾動回到第一張。這么做的缺點是，滾動到最后一張時，會有一個反向，導致整個滾動過程不連貫。
方案二：
實現原理示意圖
原理：
1.輪播過程中，有幾個關鍵元素：一個舞台（綠框）、候場區（黑框）、排隊區（紅框）和兩個數組A和B。A用來保存正在展示和下一個將要展示的圖片，如：圖片1、2；B用來保存排隊等候出場的圖片，如圖片5、4、3。
2.每一步輪播時，要做的事情如下：
A要做的事情是把它的第一個元素向左移走，把第二個元素向左移進展示區域；然后把剛才的第一個元素從A中shift出去，並splice進B的第一個位置上。
B要做的事情是把它的最后一個元素，移到候場區（即目前圖2所在的位置）等候；然后把剛才的最后一個元素從B中pop出去，並push到A中。
Demo－Code：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>圖片輪播-v2</title> 6 <style> 7 8 ul{ 9 margin: 0; 10 padding: 0; 11 list-style: none; 12 13 } 14 15 .sliderWrap{ 16 width: 200px; 17 height: 112px; 18 overflow: hidden; 19 margin: 0 auto; 20 } 21 .sliderWrap ul{ 22 position: relative; 23 width: 1000px; 24 transition: left .5s ease; 25 left: 0; 26 } 27 .sliderWrap li{ 28 position: relative; 29 float: left; 30 } 31 .sliderWrap ul li img{ 32 width: 100%; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="sliderWrap"> 38 <ul id="slider"> 39 <li><img src="images/slider/slider1.jpg" alt=""></li> 40 <li><img src="images/slider/slider2.jpg" alt=""></li> 41 <li><img src="images/slider/slider3.jpg" alt=""></li> 42 <li><img src="images/slider/slider4.jpg" alt=""></li> 43 </ul> 44 </div> 45 <input type="button" value="click me" id="next"/> 46 <script> 47 /** 48 * 圖片輪播 49 * @type {Element} 50 */ 51 var btn = document.getElementById("next"); 52 var dom = document.getElementById("slider"); 53 var liArr = dom.getElementsByTagName("li"); 54 55 var curWidth = 200; 56 var ulWidth = curWidth * liArr.length; 57 var show = []; 58 var circle = []; 59 60 var goAway = "translate(-" + curWidth +"px, 0) translateZ(0px)"; 61 var goIn = "translate(0, 0) translateZ(0px)"; 62 var goPre = "translate(" + curWidth +"px, 0) translateZ(0px)"; 63 64 //保證所有li在ul中能在一行內放下 65 dom.style.width = ulWidth + "px"; 66 67 for(var i = 0, len = liArr.length; i < len; i++){ 68 var curLi = liArr[i]; 69 70 curLi.setAttribute("data-index", i); 71 curLi.style.width = curWidth + "px"; 72 73 if(i == 0){ 74 curLi.style.left = 0; 75 show.push(curLi); 76 }else{ 77 curLi.style.left = - curWidth * i + "px"; 78 if(i > 1){ 79 translate(curLi, goAway, '') 80 circle.push(curLi); 81 }else{ 82 show.push(curLi); 83 translate(curLi, goPre, ''); 84 } 85 } 86 87 88 } 89 90 circle.reverse(); 91 92 btn.onclick = function(){ 93 //已展示的圖片滾粗 94 var showFirst = show.shift(); 95 translate(showFirst, goAway, "300ms"); 96 97 //正在展示的圖片 98 translate(show[0], goIn, "300ms"); 99 circle.splice(0, 0, showFirst); 100 101 //准備好下一個將要展示的圖片 102 var nextPre = circle.pop(); 103 translate(nextPre, goPre, "0ms"); 104 show.push(nextPre); 105 106 }; 107 108 function translate(dom, goType, time){ 109 dom.style.transform = 110 dom.style.webkitTransform = 111 dom.style.mozTransform = 112 dom.style.msTransform = 113 dom.style.oTransform = goType; 114 115 dom.style.transitionDuration = 116 dom.style.webkitTransitionDuration = 117 dom.style.mozTransitionDuration = 118 dom.style.msTransitionDuration = 119 dom.oTransitionDuration = time; 120 121 122 } 123 124 </script> 125 </body> 126 </html>