纯js实现轮播图

效果:

在左右两侧各有一个箭头，分别指的是向左和向右的图片切换
在图片的下方有一排圆点按钮，每个按钮有各自的点击事件，点击任意一个按钮就切换到对应的图片
不点击图片时，图片会自动播放

html

<div class="box">
  <ul class="ullist">
    <li class="lis active"><img src="img/1.jpg" alt="" width="600px" height="300px"></li>
       <li class="lis"><img src="img/2.jpg" alt="" width="600px" height="300px"></li>
       <li class="lis"><img src="img/3.jpg" alt="" width="600px" height="300px"></li>
       <li class="lis"><img src="img/4.jpg" alt="" width="600px" height="300px"></li>
  </ul>
  <ul class="xy">
       <li class="xyd active" data-index='0'></li>
       <li class="xyd" data-index='1'></li>
       <li class="xyd" data-index='2'></li>
       <li class="xyd" data-index='3'></li>
  </ul>
       <button class="btn" id='left'><</button>
       <button class="btn" id='right'>></button>
</div>

css部分

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            height: 300px;
            position: relative;
            margin: 0 auto;
        }
        .ullist{
            width: 600px;
            height: 300px;
            list-style: none;
            /* border: 1px solid red; */
            position: relative;
        }
        .lis{
            width: 600px;
            height: 300px;
            /* border: 1px solid green; */
            position: absolute;
        }
        .btn{
            width: 30px;
            height:60px;
            position: absolute;
            top: 100px;
            z-index: 100;
            opacity: 0.5;
        }
        #left{
            left: 0;
        }
        #right{
            right: 0;
        }
        .lis.active{
            z-index: 10;
        }
        .xy{
            list-style: none;
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 1000;
        }
        .xyd{
            width: 8px;
            height: 8px;
            background-color: greenyellow;
            border-radius:100% ;
            float: left;
            margin-right:14px ;
            border-style: solid;
            border-width: 2px;
            border-color: #ffffff;
        }
        .xyd.active{
            background-color: hotpink;
        }
    </style>

js部分

 <script>
        var olis=document.getElementsByClassName('lis')//获取图片的li
        var oleft=document.getElementById('left')//左边按钮
        var oright=document.getElementById('right')//右边按钮
        var oxyd=document.getElementsByClassName('xyd')//获取小圆点


        var index=0;    //index表示第几张图片在展示    第index张图片在显示

        //从0开始吧active全部去掉只留下lis
        var clearActive=function(){
            for(var i=0;i<olis.length;i++){
                olis[i].className='lis'; 
            }
            for(var i=0;i<oxyd.length;i++){
                oxyd[i].className='xyd'; 
            }
        }
        //添加active
        var start=function(){
            clearActive();
            
            olis[index].className='lis active';  //olis[index]表示这张图片有active这个类名
            oxyd[index].className='xyd active';
        }
        //右边的按钮(下一个图片)
        var down=function(){
            if(index<olis.length-1){
                index++;
            }else{
                index=0
            }
            start();
        }
        //左边的按钮(上一个图片)
        var up=function(){
            if(index==0){
                index=3
            }else{
                index--
            }
            start()
        }
        //addEventListener事件监听
        //addEventListener('事件',函数,布尔值(false  true))
        oright.addEventListener('click',function(){
            down()
        })
        oleft.addEventListener('click',function(){
            up()
        })

        for(var i=0;i<oxyd.length;i++){
            oxyd[i].addEventListener('click',function(){
                var oxyds=this.getAttribute('data-index');
                index=oxyds
                start()
            })
        }


        setInterval(function(){
            down()
        },1500)
    </script>