在这里记录几种可以原生实现的轮播图
第一种实现的逻辑：
- 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 .container { 12 position: relative; 13 600px; 14 height: 400px; 15 overflow: hidden; 16 margin: 0 auto; 17 } 18 19 .container .wrap { 20 position: absolute; 21 3000px; 22 height: 400px; 23 transition: all 1s; 24 } 25 26 .container .wrap img { 27 float: left; 28 600px; 29 height: 400px; 30 } 31 32 .container .buttons { 33 display: flex; 34 position: absolute; 35 bottom: 15px; 36 left: 225px; 37 150px; 38 height: 10px; 39 } 40 41 .container .buttons span { 42 flex: 1; 43 margin: 0 5px; 44 height: 20px; 45 20px; 46 border-radius: 50%; 47 background: rgb(198, 200, 185); 48 text-align: center; 49 cursor: pointer; 50 } 51 52 .container .buttons span.active { 53 background-color: rgb(206, 250, 9); 54 55 } 56 57 .container .arrow { 58 position: absolute; 59 top: 5%; 60 bottom: 5%; 61 color: rgb(215, 221, 209); 62 text-align: center; 63 font-size: 50px; 64 padding: 160px 14px; 65 cursor: pointer; 66 } 67 68 .container .arrowL { 69 left: 10px; 70 71 } 72 .container .arrowR{ 73 right: 10px; 74 75 } 76 #img1{ 77 background: red; 78 } 79 #img2{ 80 background: orange; 81 } 82 #img3{ 83 background: yellow; 84 } 85 #img4{ 86 background: green; 87 } 88 #img5{ 89 background: blue; 90 } 91 </style> 92 93 <body> 94 <div class="container"> 95 <div class="wrap" style="left: 0 " > 96 <img id="img1" src="./picture/1.jpg" alt=""> 97 <img id="img2" src="./picture/2.jpg" alt=""> 98 <img id="img3" src="./picture/3.jpg" alt=""> 99 <img id="img4" src="./picture/4.jpg" alt=""> 100 <img id="img5" src="./picture/5.png" alt=""> 101 </div> 102 <div class="buttons"> 103 <span class="active">1</span> 104 <span>2</span> 105 <span>3</span> 106 <span>4</span> 107 <span>5</span> 108 </div> 109 <a class="arrow arrowL"> < </a> 110 <a class="arrow arrowR"> > </a> 111 </div> 112 <script> 113 let container = document.querySelector('.container') 114 let wrap = document.querySelector('.wrap') 115 let next = document.querySelector('.arrowR') 116 let pre = document.querySelector('.arrowL') 117 let buttons = document.getElementsByTagName('span') 118 let index = 0 //当前展示的图片索引 119 120 next.onclick = function () { 121 nextPic() 122 } 123 pre.onclick = function () { 124 prePic() 125 } 126 //按钮模块 127 function showCurrentButton() { 128 for (let i = 0 ; i < buttons.length ; i++ ){ 129 buttons[i].className = "" 130 } 131 buttons[index].className = 'active' 132 } 133 for(let i = 0 ; i<buttons.length;i++){ 134 clickButton(i) 135 } 136 function clickButton(i) { 137 buttons[i].onclick = function(){ 138 wrap.style.left = i*(-600)+"px" 139 index= i 140 showCurrentButton() 141 } 142 } 143 144 // 右箭头 145 function nextPic (){ 146 index++; 147 let newLeft; 148 if(wrap.style.left =="-2400px"){ 149 newLeft = 0; 150 index = 0 151 }else{ 152 newLeft = parseInt(wrap.style.left) - 600 153 } 154 wrap.style.left = newLeft+ 'px' 155 showCurrentButton() 156 } 157 //左箭头 158 function prePic(){ 159 index--; 160 let newLeft; 161 if(wrap.style.left =="0px"){ 162 newLeft = -2400; 163 index = 4 164 }else{ 165 newLeft = parseInt(wrap.style.left) + 600 166 } 167 wrap.style.left = newLeft+ 'px' 168 showCurrentButton() 169 170 } 171 //自动轮播 172 function autoPlay(){ 173 timer = setInterval(nextPic, 1000) 174 } 175 autoPlay() 176 177 //鼠标悬停 178 container.onmouseenter = function(){ 179 clearInterval(timer) 180 } 181 container.onmouseleave = function () { 182 autoPlay() 183 } 184 </script> 185 </body> 186 187 </html>