兩種圖片輪播實現方案,先來看效果對比:html
方案一:git
原理:將圖片擺成一行,從左到右依次滾動進入視野,當滾動到最後一張時,從右到左滾動回到第一張。這麼作的缺點是,滾動到最後一張時,會有一個反向,致使整個滾動過程不連貫。github
方案二:web
實現原理示意圖數組
原理:dom
1.輪播過程當中,有幾個關鍵元素:一個舞臺(綠框)、候場區(黑框)、排隊區(紅框)和兩個數組A和B。A用來保存正在展現和下一個將要展現的圖片,如:圖片一、2;B用來保存排隊等候出場的圖片,如圖片五、四、3。 ide
2.每一步輪播時,要作的事情以下:spa
A要作的事情是把它的第一個元素向左移走,把第二個元素向左移進展現區域;而後把剛纔的第一個元素從A中shift出去,並splice進B的第一個位置上。3d
B要作的事情是把它的最後一個元素,移到候場區(即目前圖2所在的位置)等候;而後把剛纔的最後一個元素從B中pop出去,並push到A中。code
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>