JavaScript实现自动轮播图

轮播图有多种形态，本篇用原生js实现自动轮播图，并且在图片下方加一行索引，实现点击索引出现对应的图片
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;}
.list{
   width: 1000px;height: 30px;position: absolute;left: 0;bottom: 0;display: flex;background: rgba(200,200,200,0.5);}
.list span{
   flex: 1;line-height: 30px;text-align: center;border-left:solid 1px black;border-right: solid 1px black;}
.list span.active{
   background: red;color: #fff;}

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"</