原生js实现层叠轮播

HTML

	<div class="warpper">
		<div class="imgs">
			<img src="imgs/1.jpg" class="img0">
			<img src="imgs/2.jpg" class="img1">
			<img src="imgs/3.jpg" class="img2">
			<img src="imgs/4.jpg" class="img4">
			<img src="imgs/5.jpg"  class="img4">
		</div>
		<div class="btn">
			<a href="#" id="lbtn"><</a>
			<a href="#" id="rbtn">></a>
		</div>
		<ul class="circle">
			<li class="active"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>	

CSS

<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			
		}
		.warpper{
			width: 700px;
			height: 342px;
			position: relative;
			margin: auto;
		}
		.imgs>img{
			position: absolute;
            width: 500px;
            height: 342px;
            top: 50%;
            transform: translateY(-50%);
            transition: all 0.5s;
		}
		//第一张图片的位置
		.imgs .img0{
			left: -10px;
            width: 500px;
            z-index: 77;
            opacity: 0;
		}
		.imgs .img1{
			left: -10px;
            width: 500px;
            z-index: 88;
            opacity: 0.7;
		}
		.imgs .img2{
			left: 350px;
            transform: translate(-50%,-50%);
            z-index: 99;
            opacity: 1;
            }
        .imgs .img3{
			left: 710px;
            width: 500px;
            transform: translate(-100%,-50%);
            z-index: 88;
            opacity: 0.7;
            }
         .imgs .img4{
			left: 710px;
            width: 500px;
            transform: translate(-100%,-50%);
            z-index: 77;
            opacity: 0.7;
        }
        .btn{
        	width: 650px;
        	height: 30px;
        	position: absolute;
        	top:calc(50% - 15px);
        	left:25px;
        	z-index: 999;
        }
		#rbtn,#lbtn{
			display: inline-block;
			width: 120px;
			text-decoration: none;
			font-size: 60px;
			
		}
		#rbtn{
			float: right;
			text-align: right;
			
		}
		.circle{
			position: absolute;
        	bottom: 10px;
        	left:300px;
        	z-index: 999;
		}
		.circle li{
			float: left;
			width: 15px;
			height: 15px;
		}
		.active{
			color: #abcdee;
		}
	</style>

JS

<script type="text/javascript">
		var warpper= document.getElementsByClassName("warpper")[0];
		var pics = document.getElementsByTagName("img");
		var lis = document.getElementsByTagName("li")
		var lbtn = document.getElementById("lbtn");
		var rbtn = document.getElementById("rbtn");
		//创建数组存储图片位置的样式
		var arr=["img0","img1","img2","img3","img4"];
		//存储原点的活动样式
		var liarr =["active",,,,,]
		//定义定时器
		 var timer= setInterval(show,2000)
		 //定义设置向左自动轮播
               function show(){
                    //拿到arr[0]的值
                    var first = arr.shift();
                    //拿到liarr[length-1]的值
                    var fone = liarr.pop()
                    //将arr[0]追加到arr的后面去
                    arr.push(first);
                    //将liarr[length-1]追加到liarr的前面去
                    liarr.unshift(fone)
                    //for循环遍历每一个li，逐个替换class
                    for(let i = 0 ; i < arr.length; i++){
                        //循环出的img的class名替换成arr数组里面class名
                        pics[i].className = arr[i];
                        lis[i].className = liarr[i]
                    };
                }
				//tips:最重要的是理解计时器变化是，改变的是各个图片的位置，而不是改变图片
                //左点击事件，利用同样的方法将pics与lis同步，随着点击事件的发生而改变。
        lbtn.onclick = function(){
        	var first = arr.shift();
        	var fone = liarr.shift()
            arr.push(first);
            liarr.push(fone)
        	for(var i=0;i<arr.length;i++){
        		pics[i].className=arr[i]
        		lis[i].className = liarr[i]
        	}
        }
        rbtn.onclick = function(){
        	var first = arr.pop();
        	var fone = liarr.pop()        	
             arr.unshift(first);
             liarr.unshift(fone);       
        	for(var i=0;i<arr.length;i++){
        		pics[i].className=arr[i]
        		lis[i].className = liarr[i]
        	}
        }
        //鼠标移入事件，清除定时器
        warpper.onmouseover=function(){
        	clearInterval(timer)
        }
        //鼠标再次移出，调用计时器
        warpper.onmouseout=function(){
        	timer= setInterval(show,1000)
        }
	</script>