JS实现的花样轮播效果

第一种：简单的带按钮的轮播
介绍：左右按钮控制轮播，点击左按钮切换上一张图片，点击右按钮切换下一张

html如下：`

 <div class="box">
        <div class="imgbox">
            <a><img src="img/banner1.jpg" alt=""></a>
            <a><img src="img/banner2.jpg" alt=""></a>
            <a><img src="img/banner3.jpg" alt=""></a>
            <a><img src="img/banner4.jpg" alt=""></a>
            <a><img src="img/banner5.jpg" alt=""></a>
        </div>
        <div class="btns">
            <input type="button" id="left" value="<<<">
            <input type="button" id="right" value=">>>">
        </div>

css如下：

 .box{
   width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;}
        .box .imgbox{
   }
        .imgbox a{
   width: 1000px;height: 300px;position: absolute;left:1000px;top:0;}
        .imgbox a:nth-child(1){
   left:0;}
        .imgbox img{
   width: 1000px;height: 300px;}

        .btns input{
   width: 40px;height: 40px;position: absolute;top:130px;border: none;background: rgba(200,200,200,0.5);}
        #left{
   left:0;}
        #right{
   right: 0;}}

js如下：

class Banner{
   
        constructor(){
   
            this.left = document.getElementById("left");
            this.right = document.getElementById("right");
            this.child = document.querySelectorAll(".imgbox a");

            // 要进来的
            this.iNow = 0;
            // 要走的
            this.iPrev = this.child.length - 1;
        }
        init(){
   
            var that = this;
            this.left.addEventListener("click",function(){
   
                that.changeIndex(1);
            })
            this.right.addEventListener("click",function(){
   
                that.changeIndex(2);
            })
        }
        changeIndex(direct){
   
            if(direct == 1){
   
                if(this.iNow == 0){
   
                    this.iNow = this.child.length-1;
                    this.iPrev = 0;
                }else{
   
                    this.iNow--;
                    this.iPrev = this.iNow + 1;
                }
            }else{
   
                if(this.iNow == this.child.length-1){
   
                    this.iNow = 0;
                    this.iPrev = this.child.length-