在这里记录几种可以原生实现的轮播图
第一种实现的逻辑：
- 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" > 114 <img id="img2" src="./picture/2.jpg" > 115 <img id="img3" src="./picture/3.jpg" > 116 <img id="img4" src="./picture/4.jpg" > 117 <img id="img5" src="./picture/5.png" > 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>