两种图片轮播实现方案,先来看效果对比:
方案一:
原理:将图片摆成一行,从左到右依次滚动进入视野,当滚动到最后一张时,从右到左滚动回到第一张。这么做的缺点是,滚动到最后一张时,会有一个反向,导致整个滚动过程不连贯。
方案二:
实现原理示意图
原理:
1.轮播过程中,有几个关键元素:一个舞台(绿框)、候场区(黑框)、排队区(红框)和两个数组A和B。A用来保存正在展示和下一个将要展示的图片,如:图片1、2;B用来保存排队等候出场的图片,如图片5、4、3。
2.每一步轮播时,要做的事情如下:
A要做的事情是把它的第一个元素向左移走,把第二个元素向左移进展示区域;然后把刚才的第一个元素从A中shift出去,并splice进B的第一个位置上。
B要做的事情是把它的最后一个元素,移到候场区(即目前图2所在的位置)等候;然后把刚才的最后一个元素从B中pop出去,并push到A中。
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>