js实现轮播图

1、index.html

<div id="banner_id" style="display: flex;justify-content: center;">
           <div class="banner_box">
                 <header class="header_box">
                    <img src="./front/images/intro/1.png" alt="">
                    <img src="./front/images/intro/4.png" alt="">
                    <img src="./front/images/intro/3.png" alt="">
                    <img src="./front/images/intro/5.png" alt="">
                    <img src="./front/images/intro/1.png" alt="">
                </header>
                <button class="banner_btn"> > </button><button class="banner_btn"> < </button>
                <ul class="ul_box">                                      
                    <li class="ul_li"></li>
                    <li class="ul_li"></li>
                    <li class="ul_li"></li>
                    <li class="ul_li"></li>
                </ul> 
          </div>
  </div>

2.style.css

@chatset "utf-8";
.banner_box{
    position: relative;
    overflow:hidden;                    /*！！！隐藏超出的部分*/
    min-width: 1440px;
    max-height: 420px;
    width:1440px;                       /*这个div是用来显示的最好和图片宽高一样*/
    height: 420px;
    z-index:-1;

}
.header_box{
    width: 7200px;
    height: 420px;
    position: relative;                 /*开启偏移的设置*/
    left: 0;
}
.banner_box button{                                 /*设置button 左右按钮的设置*/
    width: 35px;
    height: 35px;
    border:none;
    background: rgba(0,0,0,0.7);    
    position: absolute;
    color:white;
}
.banner_box button:focus{outline:0;}

.banner_box button:last-of-type{                    /*向后的按钮位置*/
    top:50%;
    transform: translateY(-50%);    
}
.banner_box button:first-of-type{                   /*向前的按钮位置*/
    top:50%;
    right: 0;
    transform: translateY(-50%);
}
.banner_box ul{
    width: 30%;
    height: 100px;
    position: absolute;
    bottom:0;
    left: 50%;
    transform: translateX(-50%);
}
.banner_box ul li{                                         /*小圆点是通过li的默认样式*/
    width: 25%;
    height: 100%;
    list-style-type: circle;
    list-style-position: inside;               /*让li的小圆点居中*/ 
    line-height: 160px;
    float: left;
    text-align: center;
    font-size:22px;
    color:yellow;
}
.banner_box ul li:first-of-type{                        /*第一个li默认选中所以为实心圆*/
    list-style-type: disc;
}
.header_box img{
    position: relative;
    display: block;
    float: left;
    z-index: -1;
    width: 1440px;
    height: 420px;
}

3.index.js

window.onload=() => { 
        var header = this.document.getElementsByClassName("header_box")[0];
        var div = this.document.getElementsByClassName("banner_box")[0];
        var buttons = this.document.getElementsByClassName("banner_btn");
        var index=0;                                  //翻滚的页码值
        var timeout;
        /*var lis=document.querySelectorAll(".ul_li");*/      //获取所有的li返回的是一个数组形式
        var lis=this.document.getElementsByClassName("ul_li");
        
        buttons[0].onclick=() =>{                     //向前按钮
            move(index++)
        }
        buttons[1].onclick=() =>{                      //向后按钮
            move(index--)

        }
        var newtime=setInterval(buttons[0].onclick, 5000);
        div.onmouseout=() =>{
            newtime=setInterval(buttons[0].onclick, 5000);
        }
        div.onmouseover=()=>{
            clearInterval(newtime)
        }
        for(i in lis){                                  //小圆点点击事件
            lis[i].index=i                              //记录下标值
            lis[i].onclick=function(){    
                    circle(this.index)
                    move(this.index)
                    index=this.index
            }
        }
        function circle(num){
            if(num==4){
                num=0;
            }
            for(i of lis){
                i.style.listStyleType="circle"
            }
            lis[num].style.listStyleType="disc"
        }
        function move(){
            var offleft,showW;
            clearInterval(timeout)
            timeout = setInterval(function(){               //缓慢移动
                    if(index>4){
                        index=1;
                        header.style.left=0+"px";  
                    }else if(index<0){
                        index=3;
                        header.style.left=-(lis.length)*div.clientWidth+"px";  
                    }
                    offleft=header.offsetLeft;                 //总偏移值
                    showW=(-index*div.clientWidth-offleft)/10    //每次偏移值
                    if(showW>0){                               //把数值向上走
                    showW=Math.ceil(showW)
                    }else{
                    showW=Math.floor(showW)
                    }
                    circle(index);
                    offleft=offleft+showW
                header.style.left=offleft+"px";     
                if(showW==0){
                    clearInterval(timeout)
                }
            }, 30);
        }
}