简易轮播图实现

css代码：

#banner{
    width: 700px;
    height: 280px;
    margin: 50px auto;
    background-size: 700px 280px;
    position: relative;
}
#banner span{
    display: inline-block;
    width: 40px;
    height: 70px;
    background:rgba(0,0,0,0.3);
    position: absolute;
    top:105px;
    display: flex;
    align-items: center;
}
#banner #left{
    left: 20px;
}
#banner #right{
    right: 20px;
}
#banner span em{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-left: 5px solid white;
    border-bottom: 5px solid white;
}
#banner #left em{
    transform: rotate(48deg);
    margin-left: 13px;
}
#banner #right em{
    transform: rotate(-138deg);
}
#banner ul{
    width: 700px;
    height: 30px;
    position: absolute;
    bottom:0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
#banner ul li{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 10px;
    background:black;
}

html代码：

<div id="banner">
    <span id="left"><em></em></span>
    <span id="right"><em></em></span>
    <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
    </ul>
</div>

js代码：

class banners{
    constructor(ops){
        this.banner = ops.banner;
        this.li = ops.li;
        this.left = ops.left;
        this.right = ops.right;
        this.index=0;
        this.arr = ops.arr;
        this.autoTime = ops.autoTime;
        this.first();
        this.addEvent();
        this.autoPlay();
    }
    //第一次的默认效果
    first(){
       this.setImg();
       this.setLi();
    }
    // 左按钮
    leftEvent(){
        this.index--;
        if(this.index==-1){
            this.index=this.arr.length-1
        }
        this.setImg();
        this.setLi();
        } 
    // 右按钮
    rightEvent(){
        this.index++;
        if(this.index==this.arr.length){
            this.index=0;
        }
         this.setImg();
         this.setLi();
   }
       //设置背景图片
    setImg(){      
              // 设置轮播大框的图片
       this.banner.style.backgroundImage=`url(${this.arr[this.index]})`
       }
    // li的颜色

    setLi(){
        for(let i = 0;i<this.li.length; i++){
            if(this.index == i){   //设置li的颜色，点击的li变色其他不变
                this.li[i].style.backgroundColor="red";
            }else{
               this.li[i].style.backgroundColor="black";
            }
        }
    }
    addEvent(){
        let that = this;
        this.left.onclick=function(){
            that.leftEvent();  //左按钮点击事件
        }
        this.right.onclick=function(){
            that.rightEvent();  //右按钮点击事件
        }
        for(let i=0;i<this.li.length;i++){
            this.li[i].onclick = function(){
               that.index=i;    //li的点击事件
               that.setImg();
               that.setLi();
            }
        } 
      
    }
   autoPlay(){ // 自动轮播
       if(!this.autoTime){
           this.autoTime = 3000;
       }
      var time = setInterval(()=>{
           this.rightEvent();
       }, this.autoTime);
      this.banner.onmouseover=function(){
           clearInterval(time); //鼠标进入清除计时器
      }
      var that = this;
      this.banner.onmouseout = function(){
           time = setInterval(()=>{  //鼠标离开计时器再次启动
               that.rightEvent();
           }, that.autoTime);
       }
   }
}
new banners({
   banner : document.querySelector("#banner"),
   li : document.querySelectorAll("ul li"),
   left : document.getElementById("left"),
   right : document.getElementById("right"),
   autoTime:1000,
   arr:[
        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2067813354,2278267070&fm=26&gp=0.jpg",
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1742886454,2307269776&fm=26&gp=0.jpg",
        "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=249678191,2118772918&fm=26&gp=0.jpg",
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3596650269,3692947032&fm=26&gp=0.jpg",
        "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=357420862,1595125305&fm=26&gp=0.jpg"
             ]   
     })