原生js實現(xiàn)輪播圖效果(無縫滾動) ，供大家參考，具體內(nèi)容如下
效果圖：
代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
|
<!DOCTYPE html><html lang="en"><!-- day07 7-10-14 --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./images1/20.animate.js"></script> <style> * { margin: 0; padding: 0; } li { list-style: none; } .focus { /*overflow: hidden;*/ position: absolute; top: 100px; left: 200px; width: 721px; height: 455px; background-color: brown; } .prev, .next { display: none; position: absolute; top: 50%; margin-top: -15px; width: 20px; height: 30px; background-color: rgba(0, 0, 0, .3); text-decoration: none; color: #fff; line-height: 30px; text-align: center; font-size: 16px; z-index: 2; } .focus ul { /* 引入動畫js文件要求必須有定位 */ position: absolute; width: 600%; } .focus ul li { float: left; } .prev { left: 0; border-top-right-radius: 15px; border-bottom-right-radius: 15px; } .next { right: 0; border-top-left-radius: 15px; border-bottom-left-radius: 15px; } .promo-nav { position: absolute; bottom: 10px; left: 60px; width: 200px; height: 18px; border-radius: 9px; } .promo-nav li { float: left; width: 10px; height: 10px; background-color: #fff; margin: 2px; border-radius: 50%; } .promo-nav .current { background-color: orange; } .focus ul li a img { width: 721px; height: 455px; } </style></head> <body> <div class="focus"> <ul> <li> <a href="#" ><img src="images1/focu01.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images1/focu02.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images1/focu03.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images1/focu04.jpg" alt=""></a> </li> </ul> <!-- 左側(cè)按鈕 --> <a href="javascript:;" class="prev"><</a> <!-- 右側(cè)按鈕 --> <a href="javascript:;" class="next">></a> <ol class="promo-nav"> </ol> </div> <script> window.addEventListener('load', function() { var focus = document.querySelector('.focus'); var prev = document.querySelector('.prev'); var next = document.querySelector('.next'); var focusWidth = focus.offsetWidth; //鼠標經(jīng)過 focus.addEventListener('mouseenter', function() { prev.style.display = 'block'; next.style.display = 'block'; clearInterval(timer); timer = null; //清除定時器變量 }) //鼠標離開 focus.addEventListener('mouseleave', function() { prev.style.display = 'none'; next.style.display = 'none'; timer = setInterval(function() { next.click(); }, 2000) }) //3.動態(tài)生成小圓圈 有幾張圖片 就生成幾個小圓圈 var ul = focus.querySelector('ul'); var ol = focus.querySelector('.promo-nav'); // console.log(ul.children.length); 4 for (var i = 0; i < ul.children.length; i++) { //創(chuàng)建一個li var li = document.createElement('li'); //記錄當前小圓圈的索引號 通過自定義屬性來做 li.setAttribute('index', i); //插入到ol后面 ol.appendChild(li); //4.鼠標點擊小圓圈小圓圈變色(給小圓圈添加current類其余小圓圈移除這個類)(排他思想) //在生成小圓圈的同時直接綁定點擊事件 li.addEventListener('click', function() { for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } this.className = 'current'; //5.點擊小圓點 移動圖片 移動的是ul //ul移動的距離 小圓圈的索引號乘以圖片寬度 注意是負值 //當我們點擊了某個小li就得到了當前小li的索引號 var index = this.getAttribute('index'); //當我們點擊了某個li就把li的索引號給num num = index; //當我們點擊了某個li就把li的索引號給index circle = index; console.log(index); animate(ul, -index * focusWidth, ); }) } //把ol里面的第一個li北京顏色設(shè)置成白色 ol.children[0].className = 'current'; //6. 克隆第一張li放到ul后面 var first = ul.children[0].cloneNode(true); ul.appendChild(first); //7.點擊右側(cè)按鈕圖片滾動一張 var num = 0; var circle = 0; var flag = true; //右側(cè)按鈕 next.addEventListener('click', function() { if (flag) { flag = false; //先關(guān)閉節(jié)流閥 //5.如果走到最后一張復制圖片此時ul快速復原 left改為0(無縫滾動) if (num == ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animate(ul, -num * focusWidth, function() { flag = true; }); //8.點擊右側(cè)按鈕小圓圈跟隨一起變化 聲明一個變量控制小圓圈變化 circle++; //如果 circle等于4說明做到最后克隆的這張圖片了 我們就復原 if (circle == ol.children.length) { circle = 0; } // //清除其余小圓圈類名 // for (var i = 0; i < ol.children.length; i++) { // ol.children[i].className = ''; // } // //留下當前小圓圈current類名 // ol.children[circle].className = 'current'; circleChange(); } }) //左側(cè)按鈕 prev.addEventListener('click', function() { if (flag) { flag = false; //5.如果走到最后一張復制圖片此時ul快速復原 left改為0(無縫滾動) if (num == 0) { num = ul.children.length - 1; ul.style.left = -num * focusWidth + 'px'; } num--; animate(ul, -num * focusWidth, function() { flag = true; }); //8.點擊右側(cè)按鈕小圓圈跟隨一起變化 聲明一個變量控制小圓圈變化 circle--; //如果 circle小于0小圓圈要改為第四個小圓圈 if (circle < 0) { circle = ol.children.length - 1; } // 清除其余小圓圈類名 // for (var i = 0; i < ol.children.length; i++) { // ol.children[i].className = ''; // } // 留下當前小圓圈current類名 // ol.children[circle].className = 'current'; circleChange(); } }) function circleChange() { //清除其余小圓圈類名 for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } //留下當前小圓圈current類名 ol.children[circle].className = 'current'; } //10.自動播放輪播圖 var timer = setInterval(function() { next.click(); }, 2000) }) </script></body> </html> |
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/are_gh/article/details/112001919
