图解js图片轮播
两种图片轮播实现方案，先来看效果对比：
方案一：
原理：将图片摆成一行，从左到右依次滚动进入视野，当滚动到最后一张时，从右到左滚动回到第一张。这么做的缺点是，滚动到最后一张时，会有一个反向，导致整个滚动过程不连贯。
方案二：
实现原理示意图
原理：
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>
