在这里记录几种可以原生实现的轮播图
第一种实现的逻辑：
- css核心是overflow ：hidden，给最外层父盒子div设置该属性并且只给容纳一张图的宽高，给其中子元素wrap盒子设置成五倍其大小，并排排列，这样每次只能显示五分之一wrap盒子的内容即一张图片的内容，每次移动一个图片。
- 给wrap盒子设置一个left属性，通过js控制该属性，让页面显示不同的wrap部分内容。
- js没啥重点，获取页面相关元素节点后，通过for循环设置小圆点按钮，定义pre next俩个函数，并为左右箭头绑定俩函数 ，最后 通过setInterval方法包装next函数,定时触发next 实现轮播效果。
具体代码如下：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Document</title>
9 </head>
10 <style>
11 .div {
12 position: relative;
13 width: 600px;
14 height: 400px;
15 overflow: hidden;
16 margin: 0 auto;
17 }
18 .div .box{
19 height: 400px;
20 }
21 .div .wrap {
22 position: absolute;
23 width: 3000px;
24 height: 400px;
25 /* z-index: 1; */
26 transition:all 1s
27 }
28
29 .div .wrap img {
30 float: left;
31 width: 600px;
32 height: 400px;
33 }
34
35 .div .buttons {
36 display: flex;
37 position: absolute;
38 bottom: 20px;
39 left: 225px;
40 width: 150px;
41 height: 10px;
42 z-index: 1;
43 }
44
45 .div .buttons span {
46 flex: 1;
47 margin-left: 5px;
48 margin-right: 5px;
49 height: 20px;
50 width: 20px;
51 border-radius: 50%;
52 text-align: center;
53 background-color: pink;
54 cursor: pointer;
55 color: white
56 }
57
58 .div .buttons span.on {
59 background-color: rgb(221, 118, 23);
60 }
61
62 .div .arrow {
63 position: absolute;
64 top: 5%;
65 bottom: 5%;
66 color: rgb(182, 189, 182);
67 padding: 160px 14px;
68 font-size: 50px;
69 z-index: 2;
70 cursor: pointer;
71
72 }
73
74 .div .arrowL {
75 left: 10px;
76 display: flex;
77 }
78
79 .div .arrowR {
80 right: 10px;
81 display: flex;
82 }
83
84 .div .arrow:hover {
85 background-color: rgba(0, 0, 0, 0.2);
86 }
87
88 #img1 {
89 background: red;
90 }
91
92 #img2 {
93 background: orange;
94 }
95
96 #img3 {
97 background: yellow;
98 }
99
100 #img4 {
101 background: green;
102 }
103
104 #img5 {
105 background-color: blue;
106 }
107 </style>
108
109 <body>
110 <div class="div">
111 <div class="box">
112 <div class="wrap" style="left:0">
113 <img id="img1" src="./picture/1.jpg" alt="">
114 <img id="img2" src="./picture/2.jpg" alt="">
115 <img id="img3" src="./picture/3.jpg" alt="">
116 <img id="img4" src="./picture/4.jpg" alt="">
117 <img id="img5" src="./picture/5.png" alt="">
118 </div>
119 <div class="buttons">
120 <span class="on">1</span>
121 <span>2</span>
122 <span>3</span>
123 <span>4</span>
124 <span>5</span>
125 </div>
126 <a class="arrow arrowL"> < </a>
127 <a class="arrow arrowR"> > </a>
128 </div>
129 </div>
130 <script>
131 // @ 获取各dom元素以及一些定义
132 let div = document.querySelector(".div") //用来处理鼠标悬停
133 let wrap = document.querySelector(".wrap") //轮播图容器
134 let next = document.querySelector(".arrowR") //右箭头
135 let prev = document.querySelector(".arrowL") //左箭头
136 let buttons = document.getElementsByTagName("span")//按钮数组
137 next.onclick = function () {
138 nextPic();
139 }
140 prev.onclick = function () {
141 prevPic();
142 }
143 let index = 0; //当前显示的图片索引（0-4）
144
145 //@ 图片对应的小按钮
146
147 // 显示当前图片对应的按钮选中状态
148 function showCurrentButton() {
149 for (let i = 0; i < buttons.length; i++) {
150 buttons[i].className = "";
151 }
152 buttons[index].className = "on"
153 }
154
155 for (let i = 0; i < buttons.length; i++) {
156 clickButtons(i);
157 }
158 function clickButtons(i) {
159 buttons[i].onclick = function () {
160 wrap.style.left = i* (-600) + "px";
161 index = i;
162 showCurrentButton();
163 }
164 }
165
166 // @ 下一张
167 function nextPic() {
168 index++;
169 let newLeft;
170 if (wrap.style.left == "-2400px") {
171 newLeft = 0;
172 index = 0
173 } else {
174 newLeft = parseInt(wrap.style.left) - 600;
175 }
176 wrap.style.left = newLeft + "px"
177 showCurrentButton()
178 }
179 // @ 上一张
180 function prevPic() {
181 index--
182 let newLeft;
183 if (wrap.style.left == "0px") {
184 newLeft = -2400;
185 index = 4
186 } else {
187 newLeft = parseInt(wrap.style.left) + 600;
188 }
189 wrap.style.left = newLeft + "px"
190 showCurrentButton()
191 }
192
193 // @自动轮播
194 function autoPlay() {
195 timer = setInterval(nextPic, 1000)
196 }
197 autoPlay()
198 // 鼠标悬停
199 div.onmouseenter = function () {
200 clearInterval(timer)
201 }
202 div.onmouseleave = function () {
203 autoPlay()
204 }
205 </script>
206 </body>
207
208 </html>