之前做过很多不同样式的轮播图,不是通过改变left值使图片左右移动的,就是改变透明度实现轮播图的,偶然在网易云上看到了层叠轮播图,它转换图片的方式和其他轮播图有些不同,我从来没做过这种轮播图,思考了很久该用什么方法做,终于做出来了一个简陋的成品。由于轮播图的图片是网上找来的,所以我做了模糊处理,用清晰的图片效果更好,这里是我的一个演示(没有录制鼠标):
思路和方法
我所能想出的最简单的方法就是先给轮播图中的几张图片特定的class值,再通过改变图片class的值来改变他们的位置
话不多说,上代码:
html
<div class="img"> <div class="whole"> <div class="roll-img"> <span class="last"><</span> <ul id="ul"> <li class="left"><img src="img/1.jpg" ><div></div></li> <li class="center"><img src="img/2.jpg" ><div></div></li> <li class="right"><img src="img/3.jpg" ><div></div></li> <li class="after1"><img src="img/4.jpg" ><div></div></li> <li class="after2"><img src="img/5.jpg" ><div></div></li> <li class="after3"><img src="img/6.jpg" ><div></div></li> </ul> <span class="next">></span> </div> </div> <div class="list"> <span class="btn"></span> <span class="btn" style="background: red;"></span> <span class="btn"></span> <span class="btn"></span> <span class="btn"></span> <span class="btn"></span> </div> </div>
css
*{ margin: 0; padding: 0; list-style: none; } .img{ width: 100%; height: 300px; margin-top: 100px; } .whole{ width: 50%; height: 100%; margin: 0 auto; } .roll-img{ width: 100%; height: 100%; position: relative; transform-style: preserve-3d; } .roll-img ul li{ position: absolute; width: 100%; height: 100%; cursor: pointer; } img{ width: 100%; height: 100%; } .left{ left:-300px; transform: scale(0.8); z-index: 4; background: rgb(0,0,0); transition: all 0.5s ease; } .center{ z-index: 6; left: 0; top: 0; bottom: 10%; transition: all 0.5s ease; } .right{ left:300px; transform: scale(0.8); z-index: 4; background: rgb(0,0,0); transition: all 0.5s ease; } .left div,.right div{ z-index: 5; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; left: 0; top: 0; transition: all 0.3s ease; } .after1,.after2,.after3{ z-index: 3; left: 0; top: 0; visibility: hidden; transform: scale(0); } .last,.next{ position: absolute; z-index: 10; width: 50px; height: 50px; border: 5px solid rgba(255,255,255,0.7); border-radius: 50px; font-size: 50px; font-weight: bold; text-align: center; line-height: 45px; cursor: pointer; top:40%; color: rgba(255,255,255,0.6); display: none; } .list{ width: 30%; height: 5px; display: flex; margin: 0 auto; margin-top: 20px; } .btn{ transition: all 0.3s ease; flex: 1; background: rgb(244,244,244); } .btn:not(:first-child){ margin-left: 20px; } .last{ left:-230px; } .next{ right: -230px; }
为了使效果更加流畅,好看,我加了许多相关代码
因为是层叠轮播,顾名思义就是每张图片都有属于它的一层空间,这样在轮播的时候才能体现出它的层次感,于是我设置了z-index属性,transition属性可以让动画变得非常自然,如果用js定时器来做会略显生硬,那么这样的效果就和网易云的效果比较类似了(有些效果仅靠我现在所学并不能做出来)
请注意,重点来了!
html和css都做好了,如何来做js使得图片产生轮播效果呢?
javascript
let classes = [‘left‘,‘center‘,‘right‘,‘after1‘,‘after2‘,‘after3‘]; let timer=setInterval(function(){ before(); },5000); function before(){ for(let i=0;i<classes.length;i++){ $(‘.btn:eq(‘+i+‘)‘).css("background","rgb(244,244,244)"); } let last = classes.pop(); classes.unshift(last); for(let i=0;i<classes.length;i++){ $(‘#ul>li:eq(‘+i+‘)‘).attr("class",classes[i]); } for(let i=0;i<classes.length;i++){ if($(‘#ul>li:eq(‘+i+‘)‘).attr("class")==‘center‘){ $(‘.btn:eq(‘+i+‘)‘).css("background","red"); } } } function after(){ for(let i=0;i<classes.length;i++){ $(‘.btn:eq(‘+i+‘)‘).css("background","rgb(244,244,244)"); } let first = classes.shift(); classes.push(first); for(let i=0;i<classes.length;i++){ $(‘#ul>li:eq(‘+i+‘)‘).attr("class",classes[i]); } for(let i=0;i<classes.length;i++){ if($(‘#ul>li:eq(‘+i+‘)‘).attr("class")==‘center‘){ $(‘.btn:eq(‘+i+‘)‘).css("background","red"); } } } for(let i=0;i<classes.length;i++){ (function(i){ $(‘#ul>li:eq(‘+i+‘)‘).click(function(){ if($(‘#ul>li:eq(‘+i+‘)‘).attr("class")=="left"){ after(); }else if($(‘#ul>li:eq(‘+i+‘)‘).attr("class")=="right"){ before(); }else{ return false; } }); $(‘.btn:eq(‘+i+‘)‘).mouseover(function(){ $(‘.btn:eq(‘+i+‘)‘).css("background","red"); clearInterval(timer); while(classes[i]!=‘center‘){ before(); } }); $(‘.btn:eq(‘+i+‘)‘).mouseout(function(){ $(‘.btn:eq(‘+i+‘)‘).css("background","rgb(244,244,244)"); clearInterval(timer); timer=setInterval(function(){ before(); },5000); }); })(i); } $(‘.last‘).click(function(){ clearInterval(timer); before(); timer=setInterval(function(){ before(); },5000); }); $(‘.next‘).click(function(){ clearInterval(timer); after(); timer=setInterval(function(){ before(); },5000); }); $(‘.img‘).mouseover(function(){ $(‘.last,.next‘).css("display","block"); clearInterval(timer); }); $(‘.img‘).mouseout(function(){ $(‘.last,.next‘).css("display","none"); clearInterval(timer); timer=setInterval(function(){ before(); },5000); });
以上是完整的js代码,下面我分开讲解
我设置了两个按钮,一个.last,另一个.next,当我按下它们图片就会左右滚动,实现它们很简单:
let classes = [‘left‘,‘center‘,‘right‘,‘after1‘,‘after2‘,‘after3‘];
先将轮播图中所有对象的类名都放在一个数组中,我放了六张图,所以有六个类名,现在试想一下,假如我点击next,那么第二张图就会跑到第一张图的位置上,同样第一张图会跑到最后一张图的位置上去,点击last刚好相反,最后一张图会跑到第一张图的位置上。
function before(){ for(let i=0;i<classes.length;i++){ $(‘.btn:eq(‘+i+‘)‘).css("background","rgb(244,244,244)"); } let last = classes.pop(); classes.unshift(last); for(let i=0;i<classes.length;i++){ $(‘#ul>li:eq(‘+i+‘)‘).attr("class",classes[i]); } for(let i=0;i<classes.length;i++){ if($(‘#ul>li:eq(‘+i+‘)‘).attr("class")==‘center‘){ $(‘.btn:eq(‘+i+‘)‘).css("background","red"); } } } function after(){ for(let i=0;i<classes.length;i++){ $(‘.btn:eq(‘+i+‘)‘).css("background","rgb(244,244,244)"); } let first = classes.shift(); classes.push(first); for(let i=0;i<classes.length;i++){ $(‘#ul>li:eq(‘+i+‘)‘).attr("class",classes[i]); } for(let i=0;i<classes.length;i++){ if($(‘#ul>li:eq(‘+i+‘)‘).attr("class")==‘center‘){ $(‘.btn:eq(‘+i+‘)‘).css("background","red"); } } }
用pop()取出数组最后一个元素,再用unshift()把它放到数组前面,shift()取出数组开头元素,再用push()把它放到数组后面,就搞定了(其他代码先不做解释)
下面要做的就是定时器了,不用操作也能使图片自行滚动起来:
let timer=setInterval(function(){ before(); },5000); $(‘.last‘).click(function(){ clearInterval(timer); before(); timer=setInterval(function(){ before(); },5000); }); $(‘.next‘).click(function(){ clearInterval(timer); after(); timer=setInterval(function(){ before(); },5000); });
首先设置一个定时器timer,每隔五秒执行一次,当鼠标点击按钮时,停止计时器,在开启,使得计时重新开始,这样就消除了定时器冲突
但这样还是远远不够的,不光点按钮可以实现左右滚动,点左右两边的图片都是可以滚动的
for(let i=0;i<classes.length;i++){ (function(i){ $(‘#ul>li:eq(‘+i+‘)‘).click(function(){ if($(‘#ul>li:eq(‘+i+‘)‘).attr("class")=="left"){ after(); }else if($(‘#ul>li:eq(‘+i+‘)‘).attr("class")=="right"){ before(); }else{ return false; } }); $(‘.btn:eq(‘+i+‘)‘).mouseover(function(){ $(‘.btn:eq(‘+i+‘)‘).css("background","red"); clearInterval(timer); while(classes[i]!=‘center‘){ before(); } }); $(‘.btn:eq(‘+i+‘)‘).mouseout(function(){ $(‘.btn:eq(‘+i+‘)‘).css("background","rgb(244,244,244)"); clearInterval(timer); timer=setInterval(function(){ before(); },5000); }); })(i); }
通过判断点击图片的class值来决定向左滚动还是向右滚动,点击正中间的图片无效
接下来当鼠标移入移出的时候,两个按钮.last和.next会再显示和不显示两个属性之间切换,当鼠标移入时,定时器停止,移出时又重新开始
$(‘.img‘).mouseover(function(){ $(‘.last,.next‘).css("display","block"); clearInterval(timer); }); $(‘.img‘).mouseout(function(){ $(‘.last,.next‘).css("display","none"); clearInterval(timer); timer=setInterval(function(){ before(); },5000); });
轮播图的下面有六个方块,哪个图片在正中间,哪个方块就是红色的,这个在上面几个js代码中已经写出来了
然后我们要使得鼠标放到哪个方块上,轮播图就跳到对应的图片,停止计时器,同时其他图片在数组中的位置也不会改变,鼠标移出方块之后启动计时器
$(‘.btn:eq(‘+i+‘)‘).mouseover(function(){ $(‘.btn:eq(‘+i+‘)‘).css("background","red"); clearInterval(timer); while(classes[i]!=‘center‘){ before(); } }); $(‘.btn:eq(‘+i+‘)‘).mouseout(function(){ $(‘.btn:eq(‘+i+‘)‘).css("background","rgb(244,244,244)"); clearInterval(timer); timer=setInterval(function(){ before(); },5000); });
这里我用了while循环,如果我们放到的方块对应的图片不在中心,就开始循环调用before函数,直到图片的类名等于‘center‘,也就是正中心的位置
这样我们就完成了层叠轮播图的所有基本功能,除了样式长得不太像网易云的之外,网易云轮播图该有的我们都有了。
原文地址:https://www.cnblogs.com/Tohold/p/9429890.html