我之前寫過一個簡易版的自動+手動輪播圖：簡易輪播圖
但是這個輪播圖在切換的時候是沒有實現無縫滾動的，每張圖片都是單張切換的，而不是滑動。現在用JQuery實現無縫連接的輪播圖。
無縫連接的輪播圖的原理如下：
代碼：
|
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
|
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>無縫輪播圖</title></head><style type="text/css"> * { margin: 0; padding: 0; list-style: none; text-decoration: none; } #container { position: relative; /*輪播圖容器的寬高*/ width: 500px; height: 260px; margin: 20px auto; overflow: hidden; /*溢出隱藏：只顯示一張圖片*/ } #container .wrapper { position: absolute; top: 0; left: 0; /*每張圖片的寬度和輪播圖容器的寬度相等， 整個圖片層長度：500*5=2500，由于克隆了一張，多加一張寬度*/ width: 3000px; height: 100%; } #container .wrapper li { width: 500px; height: 100%; float: left; } #container .wrapper li img { width: 100%; height: 100%; vertical-align: middle; /*去掉未浮動時圖片間的上下空隙*/ } #container .btnLeft, #container .btnRight { display: none; z-index: 999; width: 30px; height: 30px; position: absolute; top: 50%; margin-top: -15px; background-color: #9E9E9E; border-radius: 20%; opacity: 60%; font-size: 20px; color: #673ab7; text-align: center; line-height: 30px; } #container .btnLeft { left: 0; } #container .btnRight { right: 0; } #container .btnLeft:hover, #container .btnRight:hover { opacity: 70%; cursor: pointer; } /* 鼠標滑過圖片的時候顯示按鈕 */ #container:hover .btnLeft, #container:hover .btnRight { display: block; } /*圓點層*/ #container .dots { background: rgba(0, 0, 0, .3); position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 999; padding: 4px; border-radius: 24px; } #container .dots li { width: 15px; height: 15px; border-radius: 50%; background-color: #9e9e9e; float: left; /*可以使用行塊盒*/ /*display: inline-block;*/ margin: 0 5px; cursor: pointer; } #container .dots li.active { background-color: #c74b42; } .clearfix::after { content: ""; display: block; clear: both; }</style><body> <!-- 實現輪播圖的容器 --> <div id="container"> <!-- 存放全部圖片的容器 --> <div class="wrapper"> <!-- LI: 每張圖片 --> <li><img src="0.jpg"></li> <li><img src="1.jpg"></li> <li><img src="2.jpg"></li> <li><img src="3.jpg"></li> <li><img src="4.jpg"></li> <!-- 克隆到末尾 --> <li><img src="0.jpg"></li> </div> <div class="btnLeft"><</div> <div class="btnRight">></div> <!-- 分頁器：圓點 --> <div class="dots"> <ul class="clearfix"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <script src="jquery-1.11.3.min.js"></script> <!-- <script src="index.js"></script> --> <script type="text/javascript"> let $container = $('#container'), $wrapper = $container.children('.wrapper'), $btnLeft = $container.find('.btnLeft'), $btnRight = $container.find('.btnRight'), $dots = $container.find('.dots'), $dotList = $dots.find('li'); let autoTimer = null, interval = 2000, imgIndex = 0; //當前輪播的圖片索引，默認第一張 // 自動輪播 function autoPlay() { // 讓wrapper向左移動 imgIndex++; /* if(imgIndex === 4) imgIndex = 0; 這樣寫會導致圖片會一下變到第一張，不是無縫滾動 無縫滾動： 1. 把第一張克隆一份放到末尾，wrapper中會比真實的圖片層多一張 2. 依然一張張往后滾動，滾動到第5張的時候，繼續向后走（imgIndex=6），看到了克隆的第一張，再要向后走的時候， 讓其“立即”跳轉到真實的第一張（肉眼看不出跳轉），然后運動到第二張...... */ if (imgIndex > 5) { // 上次顯示的是克隆的那張，忽略真實的第一張，讓其立即跳轉到第二張 $wrapper.css('left', 0); imgIndex = 1; } // 勻速向左移動 // 無動畫版：$wrapper.css('transform', 'translate(' + (-imgIndex * 500) + 'px)'); // 動畫版： $wrapper.stop().animate({ left: -imgIndex * 500 //JQ自動補'px' }, 300); showDots(); } autoTimer = setInterval(autoPlay, interval); // 圓點對焦 function showDots() { // 由于不能修改imgIndex的值，所以定義一個臨時變量 let temp = imgIndex; temp === 5 ? temp = 0 : null; $dotList.each((index, item) => { let $item = $(item); if (index === temp) { $item.addClass('active'); return; } $item.removeClass('active'); }); } // 鼠標進入/離開輪播區域時停止/開啟自動輪播 $container.on('mouseenter', () => { clearInterval(autoTimer); }); $container.on('mouseleave', () => { autoTimer = setInterval(autoPlay, interval); }); // 點擊圓點 $dotList.click(function () { let index = $(this).index(); imgIndex = index; $wrapper.stop().animate({ left: -imgIndex * 500 //JQ自動補'px' }, 300); showDots(); }); // 左鍵點擊 $btnLeft.click(function () { imgIndex--; if (imgIndex < 0) { // 上次顯示的是真實的第一張，忽略克隆的倒數第一張，讓其立即跳轉倒數第二張 $wrapper.css('left', -2500); imgIndex = 4; } $wrapper.stop().animate({ left: -imgIndex * 500 //JQ自動補'px' }, 300); showDots(); }); // 右鍵點擊：相當于自動輪播 $btnRight.click(function() { autoPlay(); }); </script></body></html> |
這段代碼用單例模式優化一下：
html部分：test.html
|
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
|
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>無縫輪播圖</title></head><style type="text/css"> * { margin: 0; padding: 0; list-style: none; text-decoration: none; } #container { position: relative; /*輪播圖容器的寬高*/ width: 500px; height: 260px; margin: 20px auto; overflow: hidden; /*溢出隱藏：只顯示一張圖片*/ } #container .wrapper { position: absolute; top: 0; left: 0; /*每張圖片的寬度和輪播圖容器的寬度相等， 整個圖片層長度：500*5=2500，由于克隆了一張，多加一張寬度*/ width: 3000px; height: 100%; } #container .wrapper li { width: 500px; height: 100%; float: left; } #container .wrapper li img { width: 100%; height: 100%; vertical-align: middle; /*去掉未浮動時圖片間的上下空隙*/ } #container .btnLeft, #container .btnRight { display: none; z-index: 999; width: 30px; height: 30px; position: absolute; top: 50%; margin-top: -15px; background-color: #9E9E9E; border-radius: 20%; opacity: 60%; font-size: 20px; color: #673ab7; text-align: center; line-height: 30px; } #container .btnLeft { left: 0; } #container .btnRight { right: 0; } #container .btnLeft:hover, #container .btnRight:hover { opacity: 70%; cursor: pointer; } /* 鼠標滑過圖片的時候顯示按鈕 */ #container:hover .btnLeft, #container:hover .btnRight { display: block; } /*圓點層*/ #container .dots { background: rgba(0, 0, 0, .3); position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 999; padding: 4px; border-radius: 24px; } #container .dots li { width: 15px; height: 15px; border-radius: 50%; background-color: #9e9e9e; float: left; /*可以使用行塊盒*/ /*display: inline-block;*/ margin: 0 5px; cursor: pointer; } #container .dots li.active { background-color: #c74b42; } .clearfix::after { content: ""; display: block; clear: both; }</style><body> <!-- 實現輪播圖的容器 --> <div id="container"> <!-- 存放全部圖片的容器 --> <div class="wrapper"> <!-- LI: 每張圖片 --> <li><img src="0.jpg"></li> <li><img src="1.jpg"></li> <li><img src="2.jpg"></li> <li><img src="3.jpg"></li> <li><img src="4.jpg"></li> <!-- 克隆到末尾 --> <li><img src="0.jpg"></li> </div> <div class="btnLeft"><</div> <div class="btnRight">></div> <!-- 分頁器：圓點 --> <div class="dots"> <ul class="clearfix"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <script src="jquery-1.11.3.min.js"></script> <script src="index.js"></script></body></html> |
JS部分：index.js
|
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
|
function debounce(func, wait, immediate) { let timer = null, result = null; return function anonymous(...args) { let context = this, now = immediate && !timer; clearTimeout(timer); timer = setTimeout(() => { timer = null; !immediate ? (result = func.call(context, ...args)) : null; }, wait); now ? (result = func.call(context, ...args)) : null; return result; };}let bannerModule = (function () { let $container = $("#container"), $wrapper = $container.children(".wrapper"), $btnLeft = $container.find(".btnLeft"), $btnRight = $container.find(".btnRight"), $dots = $container.find(".dots"), $dotList = $dots.find("li"); let autoTimer = null, interval = 2000, imgIndex = 0; //當前輪播的圖片索引，默認第一張 // 自動輪播 function autoPlay() { // 讓wrapper向左移動 imgIndex++; /* if(imgIndex === 4) imgIndex = 0; 這樣寫會導致圖片會一下變到第一張，不是無縫滾動 無縫滾動： 1. 把第一張克隆一份放到末尾，wrapper中會比真實的圖片層多一張 2. 依然一張張往后滾動，滾動到第5張的時候，繼續向后走（imgIndex=6），看到了克隆的第一張，再要向后走的時候， 讓其“立即”跳轉到真實的第一張（肉眼看不出跳轉），然后運動到第二張...... */ if (imgIndex > 5) { // 上次顯示的是克隆的那張，忽略真實的第一張，讓其立即跳轉到第二張 $wrapper.css("left", 0); imgIndex = 1; } // 勻速向左移動 // 無動畫版：$wrapper.css('transform', 'translate(' + (-imgIndex * 500) + 'px)'); // 動畫版： $wrapper.stop().animate({ left: -imgIndex * 500 //JQ自動補'px' }, 300); showDots(); } // 圓點對焦 function showDots() { // 由于不能修改imgIndex的值，所以定義一個臨時變量 let temp = imgIndex; temp === 5 ? (temp = 0) : null; $dotList.each((index, item) => { let $item = $(item); if (index === temp) { $item.addClass("active"); return; } $item.removeClass("active"); }); } //點擊圓點 function clickDots() { $dotList.click(debounce(function () { let index = $(this).index(); imgIndex = index; $wrapper.stop().animate({ left: -imgIndex * 500 //JQ自動補'px' }, 300); showDots(); },300,true)); } // 左右按鍵 function btnClick() { $btnLeft.click(function () { imgIndex--; if (imgIndex < 0) { // 上次顯示的是真實的第一張，忽略克隆的倒數第一張，讓其立即跳轉倒數第二張 $wrapper.css('left', -2500); imgIndex = 4; } $wrapper.stop().animate({ left: -imgIndex * 500 //JQ自動補'px' }, 300); showDots(); }); // 右鍵點擊：相當于自動輪播 $btnRight.click(debounce(autoPlay, 300, true)); } return { init: function () { autoTimer = setInterval(autoPlay, interval); // 鼠標進入/離開輪播區域時停止/開啟自動輪播 $container.on("mouseenter", () => { clearInterval(autoTimer); }); $container.on("mouseleave", () => { autoTimer = setInterval(autoPlay, interval); }); clickDots(); btnClick(); }, };})();bannerModule.init(); |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/m0_37922443/article/details/111663614
