轮播那套

<div class="banner">
            <div id="prev"><svg t="1590475338509" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2799" width="40" height="40"><path d="M254.89 512l448-448 60.417 60.33-448 448L254.89 512z m60.843-60.757l453.291 453.376-60.33 60.33-453.377-453.376 60.416-60.33z" p-id="2800" fill="#e6e6e6"></path></svg></div>
            <div id="next"><svg t="1590475430357" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3162" width="40" height="40"><path d="M769.11 512l-448 448-60.417-60.33 448-448L769.11 512z m-60.843 60.757l-453.291-453.376 60.33-60.33 453.377 453.376-60.416 60.33z" p-id="3163" fill="#e6e6e6"></path></svg></div>
                <div class="lunbo" id="box">
                     <ul>
                        <li>
                            <img src="img/01.jpg" />
                        </li>
                         <li>
                            <img src="img/02.jpg"/>
                        </li>
                        <li>
                            <img src="img/01.jpg"/>
                        </li>
                    </ul>
                    <ol>
                        <li class="current"></li>
                            <li></li>
                    </ol>
                </div>
        </div>

        .banner{
                text-align: center;
                position: relative;
                height: 500px;
                overflow: hidden;
            }
            .banner ul{
                width: 300%;
                position: absolute;
                display: flex;
            }
            .banner ul li{
                list-style: none;
                width: 100%;
                
            }
            ol{
                display: none;
            }
            .banner img{
                width: 100%; 
                height: 500px;
            }
            #prev,#next{
                position: absolute;
                z-index: 100;
                top: 46%;
                background-color: #999999;
                border-radius: 100%;
                padding: 5px;
                
            }
            #prev{
                left: 20px;
            }
            #next{
                right:20px;
            }

   var screen=document.getElementsByClassName("lunbo")[0]; //轮播图显示区域div
            var ul=document.querySelector(‘.lunbo ul‘); //显示图片的ul
            var ol=document.getElementsByTagName("ol")[0]; //显示页码的ol
            var left=document.getElementById("prev"); //上一张箭头
            var right=document.getElementById("next"); //下一张箭头
            var index=0; ////声明一个变量记录图片的索引，默认第0张图片
        
            //2.给box添加鼠标移入和移出事件
            //2.1 鼠标移入
          /*  box.onmouseover= function () {
                arr.style.display="block"; //显示上一页下一页箭头
                clearInterval(timeId); //清除定时器（即鼠标移入时，图片要停止自动轮播）
            };
            //2.2 鼠标移出
            box.onmouseout= function () {
                arr.style.display="none"; //隐藏箭头
                timeId=setInterval(scroll,2000);  //重启定时器（鼠标移出，图片要恢复自动轮播）
            };
         */
            //3.给上一页下一页箭头添加点击事件
            //3.1 下一页，图片向左轮播
            right.onclick= function () {
                scroll();
            };
            //3.2 上一页，图片向右轮播
            left.onclick= function () {
                //(1)边界检测，如果当前已经是第一张，则不做任何处理
                if(index==0){
                    //无限轮播原理：如果当前是第一张，则偷偷修改ul的位置是最后一张(第一张与最后一张是同一张图片)
                    index=ul.children.length-1; //index恢复到最后一张
                    ul.style.left=-index*screen.offsetWidth+"px"; ////ul回到最后一张位置
                }
                //(2)索引自减
                index--;
                 // (3)向左移动ul：目标距离 = -screen的宽度 * 索引
                animationMove(ul,-index*screen.offsetWidth,10);
                indexShow(); //同步页码样式
            };
        
            //4.给页码添加点击事件
            for(var i=0;i<ol.children.length;i++){
                 //4.1 循环遍历数组时给每一个页码添加一个liIndex属性记录下标
                ol.children[i].liIndex=i;
                ol.children[i].onclick= function () {
                    index=this.liIndex-1;
                    scroll();
                };
            }
        
            var timeId=setInterval(scroll,3000);
            // 封装一个向右轮播的函数
            function scroll(){
                //（1）边界检测：如果当前已经是最后一张(第n+1张,n代表需要轮播的图片数量)
                if(index==ul.children.length-1){
                    //无限轮播的原理就是滚动到最后一张的时候，偷偷快速的改变ul的位置到第一张(不要任何动画，一瞬间改变)
                    index=0; //index恢复到0
                    ul.style.left=0+"px"; //ul回到初始位置
                }
                // (2)索引自增
                index++;
                // (3)向右移动ul：目标距离 = -screen的宽度 * 索引
                animationMove(ul,-index*screen.offsetWidth,10);
                indexShow(); //同步页码样式
            }
            //5.页码样式保持同步：排他思想(当前页码添加样式，其他页码移除该样式)
            function indexShow(){
                for(var i=0;i<ol.children.length;i++){
                    if(i==index){
                        ol.children[i].classList.add("current");
                    }else{
                        ol.children[i].classList.remove("current");
                    }
                    //特殊情况：当index为最后一张的时候，页码应该显示第一张
                    if(index==ul.children.length-1){
                        ol.children[0].classList.add("current");
                    }
                }
            }
            // 封装一个滚动动画函数
            function animationMove(obj,target,speed){
                clearInterval(obj.timeId);  //每次执行动画先清除原有的定时器
                obj.timeId=setInterval(function () {
                    var currentLeft=obj.offsetLeft; //获取当前位置
                   var isLeft=currentLeft>target?true:false;   //是否往左走
                   if(isLeft){
                       currentLeft-=10;    //往左走
                   }else{
                       currentLeft+=10;    //往右走
                   }
                   if(isLeft?currentLeft>target:currentLeft<target){
                      obj.style.left=currentLeft+"px";  //如果当前位置不是在目标位置则进行位置处理
                   }else{
                       clearInterval(obj.timeId);
                       obj.style.left=target+"px";
                   }
                   
                },speed);
            }