基于css3的新属性，加上js的操作，让现在js轮播图花样越来越多。
而现在出现的旋转木马层叠轮播的轮播图样式，却是得到了很多人都喜爱和投入使用。
尤其是在各大软件中，频繁的出现在大家的眼里，在web当中，也是出现了很多使用了这种轮播的方式。
下方是网易云音乐的客户端（PC）的海报。
自己跟着视频也学着做一个web的模仿一下。
以下为轮播图全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js+css旋转木马层叠轮播</title>
<style>
/*
* transition、transform为css3样式， 需要写相关兼容，此次代码没有写相关css3兼容。
*
* */
*{
margin: 0;
padding: 0;
list-style: none;
} img{
width: 100%;
margin: 0;
padding: 0;
display:block
} .box{
width: 770px;
height: 337.5px;
position: relative;
margin: 0 auto;
} .box ul{
width: 770px;
height: 337.5px;
overflow: hidden;
} .box ul li{
position: absolute;
width: 600px;
top: 50%;
transform: translateY(-50%);
/*过渡移动的动画*/
transition: all 0.5s linear;
} .box ul li a{
background-color: rgba(0,0,0,0.5);
} /*第一张图片的位置*/
.box ul .show0{
left: 0px;
width: 500px;
z-index: 77;
opacity: 0;
} /*第二张图片的位置*/
.box ul .show1{
left: 0px;
width: 500px;
z-index: 88;
opacity: 0.7;
} /*第三张图片的位置*/
.box ul .show2{
left: 385px;
transform: translate(-50%,-50%);
z-index: 99;
opacity: 1;
} /*第四张图片的位置*/
.box ul .show3{
left: 770px;
width: 500px;
transform: translate(-100%,-50%);
z-index: 88;
opacity: 0.7;
} /*第五张图片的位置*/
.box ul .show4{
left: 770px;
width: 500px;
transform: translate(-100%,-50%);
z-index: 77;
opacity: 0;
} .butBox{
width: 770px;
position: absolute;
top: 26px;
z-index: 90;
} .butL{
float: left;
width: 85px;
height: 282px;
} .butL img{
width: 56px;
height: 65px;
line-height: 282px;
margin-top: 110px;
margin-left: 14.5px;
cursor: pointer;
} .butR{
float: right;
width: 85px;
height: 282px;
} .butR img{
width: 56px;
height: 65px;
margin-top: 110px;
margin-left: 14.5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<ul id="oul">
<li class="show0"><a href="https://www.baidu.com/" target="_blank"><img src="../image/lunbo/00.jpg" /></a></li>
<li class="show1"><a href="https://www.baidu.com/" target="_blank"><img src="../image/lunbo/01.jpg" /></a></li>
<li class="show2"><a href="https://www.baidu.com/" target="_blank"><img src="../image/lunbo/02.jpg" /></a></li>
<li class="show3"><a href="https://www.baidu.com/" target="_blank"><img src="../image/lunbo/03.jpg" /></a></li>
<li class="show4"><a href="https://www.baidu.com/" target="_blank"><img src="../image/lunbo/04.jpg" /></a></li>
</ul>
<div class="butBox">
<div class="butL">
<img id="butL" src="../image/lunbo/butL.png" />
</div>
<div class="butR">
<img id="butR" src="../image/lunbo/butR.png" />
</div>
</div>
</div> <script type="text/javascript">
window.onload=function(){
var oul = document.getElementById("oul");
//获取到图片li集合
var oli = oul.getElementsByTagName("li");
//获取到左按钮
var butL = document.getElementById("butL");
//获取到右按钮
var butR = document.getElementById("butR");
//定义arr数组
var arr = ['show0','show1','show2','show3','show4']
//定义开关（默认关闭）
var flag = true; //向右按钮
butR.onclick = function(){
//判断flag是否为true，是的话变向右移动，（如果开关是关闭的情况下）。
if(flag){
//每点击一次，flag改为false，（将开关打开）。
flag = false;
//截取arr数组首位的值
var fist = arr.shift();
//将截取到的值追加到arr的后面去
arr.push(fist);
//for循环遍历每一个li，逐个替换class
for(var i = 0 ; i < arr.length; i++){
//循环出的li的class名替换成arr数组里面class名
oli[i].className = arr[i];
};
//延迟0.5秒后，flag改为true（延迟执行，0.5秒后将开关恢复到关闭状态）
//这里的延迟时间需要与css的transition的时间一样。
setTimeout(function(){
flag = true;
//500为0.5秒
},500)
};
console.log(arr,fist);
} //向左按钮
butL.onclick = function(){
//判断flag是否为true，是的话变向右移动，（如果开关是关闭的情况下）
if(flag){
//每点击一次，flag改为false，（将开关打开）。
flag = false;
//截取arr数组末位的值
var last = arr.pop();
//将截取到的值追加到arr的前面去
arr.unshift(last);
//for循环遍历每一个li，逐个替换class
for(var i = 0 ; i < arr.length; i++){
//循环出的li的class名替换成arr数组里面class名
oli[i].className = arr[i];
};
//延迟0.5秒后，flag改为true（延迟执行，0.5秒后将开关恢复到关闭状态）
//这里的延迟时间需要与css的transition的时间一样。
setTimeout(function(){
flag = true;
//500为0.5秒
},500)
};
console.log(arr,last);
}; //定义设置向右自动轮播
var lunbo = setInterval(function(){
//截取arr数组首位的值
var fist = arr.shift();
//将截取到的值追加到arr的后面去
arr.push(fist);
//for循环遍历每一个li，逐个替换class
for(var i = 0 ; i < arr.length; i++){
//循环出的li的class名替换成arr数组里面class名
oli[i].className = arr[i];
};
//3000为3秒
},3000); //鼠标移入左按钮停止自动轮播
butL.onmouseover = function(){
clearInterval(lunbo);
console.log('鼠标移进来')
}; //鼠标移出左按钮继续自动轮播
butL.onmouseout = function(){
lunbo = setInterval(function(){
//截取arr数组首位的值
var fist = arr.shift();
//将截取到的值追加到arr的后面去
arr.push(fist);
//for循环遍历每一个li，逐个替换class
for(var i = 0 ; i < arr.length; i++){
//循环出的li的class名替换成arr数组里面class名
oli[i].className = arr[i];
};
//3000为3秒
},3000);
console.log('鼠标移出去')
}; //鼠标移入右按钮停止自动轮播
butR.onmouseover = function(){
clearInterval(lunbo);
console.log('鼠标移进来')
}; //鼠标移出右按钮继续自动轮播
butR.onmouseout = function(){
lunbo = setInterval(function(){
//截取arr数组首位的值
var fist = arr.shift();
//将截取到的值追加到arr的后面去
arr.push(fist);
//for循环遍历每一个li，逐个替换class
for(var i = 0 ; i < arr.length; i++){
//循环出的li的class名替换成arr数组里面class名
oli[i].className = arr[i];
};
//3000为3秒
},3000);
console.log('鼠标移出去')
}; //鼠标移入ul标签（图片）停止自动轮播
oul.onmouseover = function(){
clearInterval(lunbo);
console.log('鼠标移进来')
}; //鼠标移出ul标签（图片）继续自动轮播
oul.onmouseout = function(){
lunbo = setInterval(function(){
//截取arr数组首位的值
var fist = arr.shift();
//将截取到的值追加到arr的后面去
arr.push(fist);
//for循环遍历每一个li，逐个替换class
for(var i = 0 ; i < arr.length; i++){
//循环出的li的class名替换成arr数组里面class名
oli[i].className = arr[i];
};
//3000为3秒
},3000);
console.log('鼠标移出去')
};
};
</script>
</body>
</html>
未经允许，禁止转载，抄袭，如需借鉴参考等，请附上该文章连接。
