自己写的小网页遇到的问题

1首先是旋转轮播图（有缺陷）
原理：一个数组中放入5个class，每一张图片一个class，每次转动的时候，复制最后一个class，然后插到最前面。弹出最后一个class,如果是上一图则是复制第一个class，然后插入最后面，再弹出第一个class
html代码：

<div class="swiper-container">
            <div class="swiper-slide swiper-slide-next1"  id="five"><img src="img/ia_100000031.jpg" alt=""></div>
            <div class="swiper-slide swiper-slide-next"  id="one"><img src="img/ia_100000027.jpg" alt=""></div>
            <div class="swiper-slide swiper-slide-active"  id="two"><img src="img/ia_100000028.jpg" alt=""></div>
            <div class="swiper-slide swiper-slide-prev"  id="three"><img src="img/ia_100000029.jpg" alt=""></div>
            <div class="swiper-slide swiper-slide-prev1"  id="four"><img src="img/ia_100000030.jpg" alt=""></div>
            <div class="swiper-slide-left"></div>
            <div class="swiper-slide-right"></div>
        </div>

css代码：

.swiper-total{
    img{
        height: 400px;
    }
}
.swiper-slide-active{
    transform: translateX(-50%);
    z-index: 100;
    img{
      height: 400px;
    }
    transition: all 0.8s;
}
.swiper-slide-prev{
    .swiper-total;
    z-index: 10;
    transform: translate3d(-33rem,0,0) scale(0.8) ;
    transition:all 0.8s;

}
.swiper-slide-prev:after{
    content:" ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.6;
}
.swiper-slide-next{
    .swiper-total;
    z-index: 10;
    transform: translate3d(-12rem,0,0) scale(0.8) ;
    transition:all 0.8s;
}
.swiper-slide-next:after{
    content:" ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.6;
}
.swiper-slide-prev1{
    .swiper-total;
    z-index: 5;
    transform: translate3d(-28rem,0,0) scale(0.5);
    transition:all 0.8s;
}
.swiper-slide-next1{
    .swiper-total;
    z-index: 5;
    transform: translate3d(-6rem,0,0) scale(0.5);
    transition:all 0.8s;

}
.swiper-slide-left{
    width: 50px;
    height: 50px;
    background-color: #000000;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    background: url("../img/ia_100000063.png") no-repeat;
    background-size: 100%;
}
.swiper-slide-right{
    width: 50px;
    height: 50px;
    background-color: #000000;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: url("../img/ia_100000063.png") no-repeat;
    background-size: 100%;
}

css用的是less的语法
js代码

var classarr=['swiper-slide-next1','swiper-slide-next','swiper-slide-active','swiper-slide-prev','swiper-slide-prev1'];
   var swiper_slide=$(".swiper-slide")
   var navlist=$(".img-nav>ul>li")
   var nextimg=function (){
       classarr.push(classarr[0])//将第一个推入最后一个 注意：先复制最后一个推入防止class被误删
       classarr.shift(classarr[0])//将列表第一个弹出
        var i=0;
        swiper_slide.removeClass("swiper-slide-active swiper-slide-next swiper-slide-prev swiper-slide-prev1 swiper-slide-next1")
        swiper_slide.eq(0).addClass(classarr[i])
        swiper_slide.eq(1).addClass(classarr[i+1])
        swiper_slide.eq(2).addClass(classarr[i+2])
        swiper_slide.eq(3).addClass(classarr[i+3])
        swiper_slide.eq(4).addClass(classarr[i+4])
    }
    var prop=function (){
        classarr.unshift(classarr[4])//向前插入最后一个元素的拷贝
        classarr.pop()//弹出最后一个
        var i=0;
        swiper_slide.removeClass("swiper-slide-active swiper-slide-next swiper-slide-prev swiper-slide-prev1 swiper-slide-next1")
        swiper_slide.eq(0).addClass(classarr[i])
        swiper_slide.eq(1).addClass(classarr[i+1])
        swiper_slide.eq(2).addClass(classarr[i+2])
        swiper_slide.eq(3).addClass(classarr[i+3])
        swiper_slide.eq(4).addClass(classarr[i+4])
    }
   var autoplayer=setInterval(nextimg,3000)
    $(".swiper-slide-left").on("click",function (){
        clearInterval(autoplayer)
        prop()
        autoplayer=setInterval(nextimg,3000)
    });//上一张图
    $(".swiper-slide-right").on("click",function (){
        clearInterval(autoplayer)
        nextimg()
        autoplayer=setInterval(nextimg,3000)
    });//下一张图

轮播图的缺陷就是没加索引，还不能跳到制定图片。（后面有可能会完善）
2 、前面的图片挡到后面的按钮的点击问题
解决：pointer-events: none;