原生js轮播图实现
程序员文章站
2024-03-17 11:24:52
...
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 * {
8 padding: 0;
9 margin: 0;
10 list-style: none;
11 border: 0;
12 }
13
14 .all {
15 width: 500px;
16 height: 200px;
17 padding: 7px;
18 border: 1px solid #ccc;
19 margin: 100px auto;
20 position: relative;
21 }
22
23 .screen {
24 width: 500px;
25 height: 200px;
26 overflow: hidden;
27 position: relative;
28 }
29
30 .screen li {
31 width: 500px;
32 height: 200px;
33 overflow: hidden;
34 float: left;
35 }
36
37 .screen ul {
38 position: absolute;
39 left: 0;
40 top: 0px;
41 width: 3000px;
42 }
43
44 .all ol {
45 position: absolute;
46 right: 10px;
47 bottom: 10px;
48 line-height: 20px;
49 text-align: center;
50 }
51
52 .all ol li {
53 float: left;
54 width: 20px;
55 height: 20px;
56 background: #fff;
57 border: 1px solid #ccc;
58 margin-left: 10px;
59 cursor: pointer;
60 }
61
62 .all ol li.current {
63 background: yellow;
64 }
65
66 #arr {
67 display: none;
68 }
69
70 #arr span {
71 width: 40px;
72 height: 40px;
73 position: absolute;
74 left: 5px;
75 top: 50%;
76 margin-top: -20px;
77 background: #000;
78 cursor: pointer;
79 line-height: 40px;
80 text-align: center;
81 font-weight: bold;
82 font-family: '黑体';
83 font-size: 30px;
84 color: #fff;
85 opacity: 0.3;
86 border: 1px solid #fff;
87 }
88
89 #arr #right {
90 right: 5px;
91 left: auto;
92 }
93 </style>
94 </head>
95 <body>
96 <div class="all" id='all'>
97 <div class="screen" id="screen">
98 <ul id="ul">
99 <li><img src="images/carousel/1.jpg" width="500" height="200" /></li>
100 <li><img src="images/carousel/2.jpg" width="500" height="200" /></li>
101 <li><img src="images/carousel/3.jpg" width="500" height="200" /></li>
102 <li><img src="images/carousel/4.jpg" width="500" height="200" /></li>
103 <li><img src="images/carousel/5.jpg" width="500" height="200" /></li>
104 </ul>
105 <ol>
106 </ol>
107 <div id="arr">
108 <span id="left"><</span>
109 <span id="right">></span>
110 </div>
111 </div>
112 </div>
113
114 <script>
115 //1.获取事件源
116 var all = document.getElementById("all");
117 var screen = all.firstElementChild || all.firstChild;
118 var imgWidth = screen.offsetWidth;
119 var ul = screen.firstElementChild || screen.firstChild;
120 var ol = screen.children[1];
121 var div = screen.lastElementChild || screen.lastChild;
122 var spanArr = div.children;
123
124 //2.复制第一张图片所在的li，添加到ul的最后面
125 var ulNewLi = ul.children[0].cloneNode(true);
126 ul.appendChild(ulNewLi);
127
128 //3.给ol添加li，ul的个数-1个，并点亮第一个按钮
129 for (var i = 0; i < ul.children.length - 1; i ) {
130 var olNewLi = document.createElement("li");
131 olNewLi.innerHTML = i 1;
132 ol.appendChild(olNewLi);
133 }
134
135 var olLiArr = ol.children;
136 olLiArr[0].className = "current";
137
138 //4.鼠标放到ol的li上，切换图片
139 for (var i = 0; i < olLiArr.length; i ) {
140 olLiArr[i].index = i;
141 olLiArr[i].onmouseover = function(){
142 for (var j = 0; j < olLiArr.length; j ) {
143 olLiArr[j].className = "";
144 }
145 this.className = "current";
146 //鼠标放到小的方块上的时候索引值和key以及square同步
147 key = square = this.index;
148 //移动盒子
149 animate(ul,-this.index * imgWidth);
150 }
151 }
152
153 //5.添加定时器
154 var timer = setInterval(autoPlay,1000);
155 //固定向右切换图片，两个定时器（一个记录图片，一个记录小方块）
156 var key = 0;
157 var square = 0;
158
159 function autoPlay(){
160 //通过控制key的自增来模拟图片的索引值，然后移动ul
161 key ;
162 if (key > olLiArr.length) {
163 //图片已经滑动到最后一张，接下来，跳转到第一张，然后在滑动到第二张
164 ul.style.left = 0;
165 key = 1;
166 }
167 animate(ul,-key * imgWidth);
168 //通过控制square的自增来模拟小方块的索引值，然后点亮盒子
169 square ;
170 if (square > olLiArr.length - 1) {
171 square = 0;
172 }
173 for (var i = 0; i < olLiArr.length; i ) {
174 olLiArr[i].className = "";
175 }
176 olLiArr[square].className = "current";
177 }
178
179 //鼠标放上去清除定时器，移开后再开启定时器
180 all.onmouseover = function(){
181 div.style.display = "block";
182 clearInterval(timer);
183 }
184 all.onmouseout = function(){
185 div.style.display = "none";
186 timer = setInterval(autoPlay, 1000);
187 }
188
189 //6.左右切换图片，鼠标放上去显示，移开隐藏
190 spanArr[0].onclick = function(){
191 //通过控制key的自增来模拟图片的索引值，然后移动ul
192 key --;
193 if (key < 0) {
194 //先移动到最后一张，然后key的值取之前一张的索引值，然后在向前移动
195 ul.style.left = -imgWidth * (olLiArr.length) "px";
196 key = olLiArr.length - 1;
197 }
198 animate(ul, -key * imgWidth);
199
200
201 //通过控制square的自增来模拟小方块的索引值，然后点亮盒子
202 //排他思想做小方块
203 square--;
204 if (square < 0) { //索引值不能大于等于5，如果等于5，立刻变为0；
205 square = olLiArr.length - 1;
206 }
207 for (var i = 0; i < olLiArr.length; i ) {
208 olLiArr[i].className = "";
209 }
210 olLiArr[square].className = "current";
211 }
212 spanArr[1].onclick = function() {
213 //右侧的和定时器一模一样
214 autoPlay();
215 }
216 function animate(ele, target) {
217 clearInterval(ele.timer);
218 var speed = target > ele.offsetLeft ? 10 : -10;
219 ele.timer = setInterval(function() {
220 var val = target - ele.offsetLeft;
221 ele.style.left = ele.offsetLeft speed "px";
222 if (Math.abs(val) < Math.abs(speed)) {
223 ele.style.left = target "px";
224 clearInterval(ele.timer);
225 }
226 }, 10)
227 }
228
229
230 //7.
231 </script>
232 </body>
233 </html>
更多专业前端知识，请上【猿2048】www.mk2048.com