本文實例為大家分享了JS實現pc端輪播圖效果的具體代碼，供大家參考，具體內容如下
案例：輪播圖需求
布局：ul下有很多li標簽；浮動在一行；
原理：切換圖片的時候，把ul位置修改一下，給ul的父容器，設置一個 overflow:hidden；
功能需求：
- 序號輪播
- 左右按鈕的輪播
- 自動輪播
- 鼠標在輪播圖里面的時候，停止自動輪播，離開后繼續自動輪播
實現效果：
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
|
<div class="box" id="box"> <div class="inner" id="inner"> <ul id="imglist"> <li> <a href="#" ><img src="images/1.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images/2.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images/3.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images/4.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images/5.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images/6.jpg" alt=""></a> </li> </ul> <div class="list"> <i class="current">1</i> <i>2</i> <i>3</i> <i>4</i> <i>5</i> <i>6</i> </div> <div class="arrow"> <span class="arrow-left"><</span> <span class="arrow-right">></span> </div> </div></div> |
css部分
|
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
|
* { margin: 0; padding: 0; } ul { list-style: none; } .box { width: 730px; height: 454px; padding: 8px; border: 1px solid green; margin: 100px auto; } .inner { position: relative; overflow: hidden; height: 454px; } #imglist { width: 700%; position: absolute; left: 0; transition: left 300ms linear; } li { float: left; } .list { position: absolute; bottom: 20px; left: 50%; margin-left: -85px; } .list i { width: 20px; height: 20px; border-radius: 50%; background-color: #fff; color: #333; float: left; font-style: normal; line-height: 20px; font-size: 14px; text-align: center; margin-right: 10px; cursor: pointer; } .list i:last-child { margin-right: 0; } .list i.current { background-color: skyblue; color: #fff; } .arrow { position: absolute; width: 100%; top: 50%; margin-top: -30px; } .arrow-left, .arrow-right { width: 30px; height: 60px; position: absolute; font: 20px/60px "consolas"; color: #fff; background-color: rgba(0, 0, 0, .3); text-align: center; cursor: pointer; } .arrow-right { right: 0; } |
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
|
// 獲取DOM var yuan = document.querySelectorAll("i"); var li = document.querySelector("ul li"); var ul = document.querySelector("ul"); var imgs = document.querySelector("#imglist"); var right = document.querySelector(".arrow-right"); var left = document.querySelector(".arrow-left"); var box = document.querySelector(".box"); window.onload = function() { //------------------------------------這里是點擊小圓圈，控制圖片的切換 //循環小圓點 注冊小圓點 for (var i = 0; i < yuan.length; i++) { //我們需要這里面的i 必須提前拿出來，要不最后i的值就是最后一個數值了 yuan[i].num = i; //注冊事件 yuan[i].onmouseover = function() { // 現在要循環將樣式移除 for (var j = 0; j < yuan.length; j++) { yuan[j].classList.remove("current"); } //這里是為了將點擊的小圓點 增加上樣式 this.classList.add("current"); var num = this.num; //到這里的思路就是點擊小圓點 將圖片進行移動，向左面移動，上面css做了相應的定位操作 //移動的距離就是 n 乘以 一張圖片的寬度， //n 就是選擇的小圓點的 坐標-----i(num) //圖片的寬度 box.offsetWidth var left = num * li.offsetWidth; // console.log(num, box.offsetWidth, left); imgs.style.left = `-${left}px`; //這里小原點聯動左右按鈕 for (var p = 0; p < yuan.length; p++) { //清除全部樣式（小圓點） yuan[p].classList.remove("current"); } //給當前的小圓點增加樣式 yuan[num].classList.add("current"); //這里這個位置比較關鍵，在上面設置完樣式之后，記得將此num賦值給全局的index index = this.num; } } //------------------------------------以上是點擊小圓圈，控制圖片的切換 //------------------------------------下面是開始右面輪播，控制圖片的切換 //首先定義一個全局的index，這個index的作用依舊是控制圖片的切換 var index = 0; right.onclick = function() { index++; //這里要對index做一下判斷，如果不做判斷，可以試想一下， //只要你一點擊，index就會無限的增大，增大到你“無法自拔” if (index == ul.children.length) { //如果坐標為6的話，顯示應該顯示第1張圖片，所以要復位 即index=0 index = 0; } var left = index * li.offsetWidth; // console.log(index, box.offsetWidth, left); imgs.style.left = `-${left}px`; //點擊右面增加聯動小圓點的效果 for (var n = 0; n < yuan.length; n++) { //清除全部樣式（小圓點） yuan[n].classList.remove("current"); } //給當前的小圓點增加樣式 yuan[index].classList.add("current"); }; //------------------------------------以上是結束右面輪播，控制圖片的切換 //------------------------------------下面是開始左面輪播，控制圖片的切換 left.onclick = function() { index--; //這里同右點擊一樣，需要做一下判斷， console.log(index); if (index == -1) { index = ul.children.length - 1; } var left = index * li.offsetWidth; // console.log(index, box.offsetWidth, left); // console.log(left); imgs.style.left = `-${left}px`; //這個位置做的是 左面點擊聯動小圓點 for (var m = 0; m < yuan.length; m++) { //清除全部樣式（小圓點） yuan[m].classList.remove("current"); } //給當前的小圓點增加樣式 yuan[index].classList.add("current"); }; //------------------------------------上面是結束左面輪播，控制圖片的切換 //------------------------------------開始設置自動輪播 var timer = setInterval(function() { right.onclick(); }, 1000); //------------------------------------以上是自動輪播結束 //------------------------------------設置鼠標進來就停止開始 box.onmouseover = function() { clearInterval(timer); }; //------------------------------------設置鼠標進來就停止結束 //------------------------------------設置鼠標出去就停止開始 box.onmouseout = function() { timer = setInterval(function() { right.onclick(); }, 1000); }; //------------------------------------設置鼠標出去就停止結束 } |
未完待續，本篇文章做的PC端的處理，目前從6頁-1頁，1頁到6頁還有點小瑕疵，會及時更新上的，其他功能一切正常，歡迎大家評論
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/qq_15198465/article/details/99004090
