你的位置:首页 > Java教程

[Java教程]图解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>