基於css3的新屬性，加上js的操作，讓現在js輪播圖花樣越來越多。
而現在出現的旋轉木馬層疊輪播的輪播圖樣式，卻是得到了很多人都喜愛和投入使用。
尤其是在各大軟件中，頻繁的出現在大家的眼里，在web當中，也是出現了很多使用了這種輪播的方式。
下方是網易雲音樂的客戶端（PC）的海報。
自己跟着視頻也學着做一個web的模仿一下。
以下為輪播圖全部代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js+css旋轉木馬層疊輪播</title> 6 <style> 7 /* 8 * transition、transform為css3樣式， 需要寫相關兼容，此次代碼沒有寫相關css3兼容。 9 * 10 * */ 11 *{ 12 margin: 0; 13 padding: 0; 14 list-style: none; 15 } 16 17 img{ 18 width: 100%; 19 margin: 0; 20 padding: 0; 21 display:block 22 } 23 24 .box{ 25 width: 770px; 26 height: 337.5px; 27 position: relative; 28 margin: 0 auto; 29 } 30 31 .box ul{ 32 width: 770px; 33 height: 337.5px; 34 overflow: hidden; 35 } 36 37 .box ul li{ 38 position: absolute; 39 width: 600px; 40 top: 50%; 41 transform: translateY(-50%); 42 /*過渡移動的動畫*/ 43 transition: all 0.5s linear; 44 } 45 46 .box ul li a{ 47 background-color: rgba(0,0,0,0.5); 48 } 49 50 /*第一張圖片的位置*/ 51 .box ul .show0{ 52 left: 0px; 53 width: 500px; 54 z-index: 77; 55 opacity: 0; 56 } 57 58 /*第二張圖片的位置*/ 59 .box ul .show1{ 60 left: 0px; 61 width: 500px; 62 z-index: 88; 63 opacity: 0.7; 64 } 65 66 /*第三張圖片的位置*/ 67 .box ul .show2{ 68 left: 385px; 69 transform: translate(-50%,-50%); 70 z-index: 99; 71 opacity: 1; 72 } 73 74 /*第四張圖片的位置*/ 75 .box ul .show3{ 76 left: 770px; 77 width: 500px; 78 transform: translate(-100%,-50%); 79 z-index: 88; 80 opacity: 0.7; 81 } 82 83 /*第五張圖片的位置*/ 84 .box ul .show4{ 85 left: 770px; 86 width: 500px; 87 transform: translate(-100%,-50%); 88 z-index: 77; 89 opacity: 0; 90 } 91 92 .butBox{ 93 width: 770px; 94 position: absolute; 95 top: 26px; 96 z-index: 90; 97 } 98 99 .butL{ 100 float: left; 101 width: 85px; 102 height: 282px; 103 } 104 105 .butL img{ 106 width: 56px; 107 height: 65px; 108 line-height: 282px; 109 margin-top: 110px; 110 margin-left: 14.5px; 111 cursor: pointer; 112 } 113 114 .butR{ 115 float: right; 116 width: 85px; 117 height: 282px; 118 } 119 120 .butR img{ 121 width: 56px; 122 height: 65px; 123 margin-top: 110px; 124 margin-left: 14.5px; 125 cursor: pointer; 126 } 127 </style> 128 </head> 129 <body> 130 <div class="box"> 131 <ul id="oul"> 132 <li class="show0"><a href="https://www.baidu.com/" target="_blank"><img src="../image/lunbo/00.jpg" /></a></li> 133 <li class="show1"><a href="https://www.baidu.com/" target="_blank"><img src="../image/lunbo/01.jpg" /></a></li> 134 <li class="show2"><a href="https://www.baidu.com/" target="_blank"><img src="../image/lunbo/02.jpg" /></a></li> 135 <li class="show3"><a href="https://www.baidu.com/" target="_blank"><img src="../image/lunbo/03.jpg" /></a></li> 136 <li class="show4"><a href="https://www.baidu.com/" target="_blank"><img src="../image/lunbo/04.jpg" /></a></li> 137 </ul> 138 <div class="butBox"> 139 <div class="butL"> 140 <img id="butL" src="../image/lunbo/butL.png" /> 141 </div> 142 <div class="butR"> 143 <img id="butR" src="../image/lunbo/butR.png" /> 144 </div> 145 </div> 146 </div> 147 148 <script type="text/javascript"> 149 window.onload=function(){ 150 var oul = document.getElementById("oul"); 151 //獲取到圖片li集合 152 var oli = oul.getElementsByTagName("li"); 153 //獲取到左按鈕 154 var butL = document.getElementById("butL"); 155 //獲取到右按鈕 156 var butR = document.getElementById("butR"); 157 //定義arr數組 158 var arr = ['show0','show1','show2','show3','show4'] 159 //定義開關（默認關閉） 160 var flag = true; 161 162 //向右按鈕 163 butR.onclick = function(){ 164 //判斷flag是否為true，是的話變向右移動，（如果開關是關閉的情況下）。 165 if(flag){ 166 //每點擊一次，flag改為false，（將開關打開）。 167 flag = false; 168 //截取arr數組首位的值 169 var fist = arr.shift(); 170 //將截取到的值追加到arr的后面去 171 arr.push(fist); 172 //for循環遍歷每一個li，逐個替換class 173 for(var i = 0 ; i < arr.length; i++){ 174 //循環出的li的class名替換成arr數組里面class名 175 oli[i].className = arr[i]; 176 }; 177 //延遲0.5秒后，flag改為true（延遲執行，0.5秒后將開關恢復到關閉狀態） 178 //這里的延遲時間需要與css的transition的時間一樣。 179 setTimeout(function(){ 180 flag = true; 181 //500為0.5秒 182 },500) 183 }; 184 console.log(arr,fist); 185 } 186 187 //向左按鈕 188 butL.onclick = function(){ 189 //判斷flag是否為true，是的話變向右移動，（如果開關是關閉的情況下） 190 if(flag){ 191 //每點擊一次，flag改為false，（將開關打開）。 192 flag = false; 193 //截取arr數組末位的值 194 var last = arr.pop(); 195 //將截取到的值追加到arr的前面去 196 arr.unshift(last); 197 //for循環遍歷每一個li，逐個替換class 198 for(var i = 0 ; i < arr.length; i++){ 199 //循環出的li的class名替換成arr數組里面class名 200 oli[i].className = arr[i]; 201 }; 202 //延遲0.5秒后，flag改為true（延遲執行，0.5秒后將開關恢復到關閉狀態） 203 //這里的延遲時間需要與css的transition的時間一樣。 204 setTimeout(function(){ 205 flag = true; 206 //500為0.5秒 207 },500) 208 }; 209 console.log(arr,last); 210 }; 211 212 //定義設置向右自動輪播 213 var lunbo = setInterval(function(){ 214 //截取arr數組首位的值 215 var fist = arr.shift(); 216 //將截取到的值追加到arr的后面去 217 arr.push(fist); 218 //for循環遍歷每一個li，逐個替換class 219 for(var i = 0 ; i < arr.length; i++){ 220 //循環出的li的class名替換成arr數組里面class名 221 oli[i].className = arr[i]; 222 }; 223 //3000為3秒 224 },3000); 225 226 //鼠標移入左按鈕停止自動輪播 227 butL.onmouseover = function(){ 228 clearInterval(lunbo); 229 console.log('鼠標移進來') 230 }; 231 232 //鼠標移出左按鈕繼續自動輪播 233 butL.onmouseout = function(){ 234 lunbo = setInterval(function(){ 235 //截取arr數組首位的值 236 var fist = arr.shift(); 237 //將截取到的值追加到arr的后面去 238 arr.push(fist); 239 //for循環遍歷每一個li，逐個替換class 240 for(var i = 0 ; i < arr.length; i++){ 241 //循環出的li的class名替換成arr數組里面class名 242 oli[i].className = arr[i]; 243 }; 244 //3000為3秒 245 },3000); 246 console.log('鼠標移出去') 247 }; 248 249 //鼠標移入右按鈕停止自動輪播 250 butR.onmouseover = function(){ 251 clearInterval(lunbo); 252 console.log('鼠標移進來') 253 }; 254 255 //鼠標移出右按鈕繼續自動輪播 256 butR.onmouseout = function(){ 257 lunbo = setInterval(function(){ 258 //截取arr數組首位的值 259 var fist = arr.shift(); 260 //將截取到的值追加到arr的后面去 261 arr.push(fist); 262 //for循環遍歷每一個li，逐個替換class 263 for(var i = 0 ; i < arr.length; i++){ 264 //循環出的li的class名替換成arr數組里面class名 265 oli[i].className = arr[i]; 266 }; 267 //3000為3秒 268 },3000); 269 console.log('鼠標移出去') 270 }; 271 272 //鼠標移入ul標簽（圖片）停止自動輪播 273 oul.onmouseover = function(){ 274 clearInterval(lunbo); 275 console.log('鼠標移進來') 276 }; 277 278 //鼠標移出ul標簽（圖片）繼續自動輪播 279 oul.onmouseout = function(){ 280 lunbo = setInterval(function(){ 281 //截取arr數組首位的值 282 var fist = arr.shift(); 283 //將截取到的值追加到arr的后面去 284 arr.push(fist); 285 //for循環遍歷每一個li，逐個替換class 286 for(var i = 0 ; i < arr.length; i++){ 287 //循環出的li的class名替換成arr數組里面class名 288 oli[i].className = arr[i]; 289 }; 290 //3000為3秒 291 },3000); 292 console.log('鼠標移出去') 293 }; 294 }; 295 </script> 296 </body> 297 </html>
未經允許，禁止轉載，抄襲，如需借鑒參考等，請附上該文章連接。