前言:
已经一个月没有怎么更博了，一直在学习一些其他得。之前在网上看到一个层叠样式得轮播图，也是看过一个博主得内容以后自己又理清楚了思路才写出来。
原文出处：https://www.cnblogs.com/iFangHuanrui/p/10584223.html
正文:
对于这类轮播图首先我们要先设置好每个需要轮播元素得位置，使得看上去相对得立体一点，那么下面我们来想一下，假设有5张图片需要轮播，图片得顺序从左到右一次排列，那么我们是不是需要将第一张和第五张对应起来，放在两边，第二张和第四章放在两边对应起来。第三张也就是当前展示得轮播图放到中间就可以了。效果如下:
下面我们来看下代码:
HTML:
<div>
<ul>
<li class="show1">1</li>
<li class="show2">2</li>
<li class="show3">3</li>
<li class="show4">4</li>
<li class="show5">5</li>
<!-- 切换按钮 -->
<div class="cut1">左</div>
<div class="cut2">右</div>
</ul>
</div>
CSS:
div{
width: 1200px;
height: 800px;
margin:150px auto;
background:pink;
}
ul{
position:relative;
width: 100%;
height: 100%;
transform:rotateX(-20deg);
}
li{
position:absolute;
list-style:none;
height: 350px;
font-size:64px;
transition: all .3s;
}
.show1{
width:400px;
top: 20px;
left:0px;
opacity:0.2;
z-index:1;
background:yellow;
}
.show5{
width: 400px;
left:750px;
top: 20px;
opacity:0.2;
z-index:1;
background:aqua;
}
.show2{
width: 600px;
left:0px;
top:70px;
opacity:.7;
z-index:2;
background:orange;
}
.show4{
width: 600px;
left:600px;
top:70px;
opacity:.7;
z-index:2;
background:gold;
}
.show3{
width: 800px;
left:180px;
top:100px;
z-index:3;
opacity:1;
background: hotpink;
}
.cut1{
position:absolute;
z-index:99;
font-size: 30px;
left:0;
top:0;
width: 50px;
height: 70px;
text-align:center;
line-height:70px;
background:gray;
}
.cut2{
position:absolute;
z-index:99;
font-size: 30px;
right:39px;
top:0;
width: 50px;
height: 70px;
text-align:center;
line-height:70px;
background:gray;
}
这些基本要求实现后，我们来看下核心部分怎么实现，大家想一下，假设我们得5张图片 1 2 3 4 5按顺序从左到右排放整齐，轮播图得整体效果是向右走的，目前显示得是第一张，那么接下来是不是需要显示第二张，那么如何显示第二张呢，是不是需要把第一张图片放到尾部，这样第二张图片就显示出来了。
那么现在得图片得顺序是不是 2 3 4 5 1，这时候我们想要轮播图向左移动一张，是不是说想要显示第一张图片，那么这个时候我们是不是只需要把最后一个元素1，移动到头部就行了呢，这样顺序就变成了1 2 3 4 5
有了以上得思路我们先实现一下自动轮播得效果:
JS：
// 获取变量名称
var ul = document.querySelector('ul');
var li = document.querySelectorAll("li");
var name1 = ["show1","show2","show3","show4","show5"];//name-style
var cut1 = document.querySelector('.cut1'); //cut1
var cut2 = document.querySelector('.cut2'); //cut2
timer = setInterval(function(){
// 把开头的元素放到最后
console.log("11");
var first = name1.shift(); //获取第一个元素
name1.push(first);//追加到数组尾部
for(var i=0;i<li.length;i++){
li[i].className = name1[i];
}
},3000);
这里就是按照上面得思路写出来得自动轮播效果。注意这里把我们上面调整得每个元素得样式复制到数组中，然后給修改每个轮播得元素得样式，也就是把name1数组得样式赋值給轮播得元素
那么大家在想一下左右切换，左切换就是说把最后一个元素移动到头部，而右切换呢，就是把第一个元素移动到尾部
代码：
// 左点击切换
cut1.onclick = function(){
clearInterval(timer); //鼠标点击切换时轮播中断
// 把数组中最后一个元素提到前面
var last = name1.pop(); //删除并返回最后一个元素
name1.unshift(last); //添加到数组头部
for(var i=0;i<li.length;i++){
li[i].className = name1[i];
}
}
// 右点击切换
cut2.onclick = function(){
clearInterval(timer); //鼠标点击切换时轮播中断
console.log("轮播停止");
var first = name1.shift(); //获取第一个元素
name1.push(first);//追加到数组尾部
for(var i=0;i<li.length;i++){
li[i].className = name1[i];
}
}
那么我们点击切换后，由于清除了该定时器，就会导致点击后自动轮播效果中断，所以我们需要在按钮得鼠标离开事件中再重新启动轮播图，这样就可以实现鼠标点击后继续轮播了
// 鼠标离开是继续轮播
cut2.onmouseout = function(){
console.log("鼠标离开");
timer = setInterval(function(){
console.log("轮播继续");
// 把开头的元素放到最后
console.log("11");
var first = name1.shift(); //获取第一个元素
name1.push(first);//追加到数组尾部
for(var i=0;i<li.length;i++){
li[i].className = name1[i];
}
},3000);
}
// 鼠标离开是继续轮播
cut1.onmouseout = function(){
console.log("鼠标离开");
timer = setInterval(function(){
console.log("轮播继续");
// 把开头的元素放到最后
console.log("11");
var first = name1.shift(); //获取第一个元素
name1.push(first);//追加到数组尾部
for(var i=0;i<li.length;i++){
li[i].className = name1[i];
}
},3000);
}
好了，答主本期得分享就到这里。欢迎大家指正与评论！！