基于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>
未经允许，禁止转载，抄袭，如需借鉴参考等，请附上该文章连接。