轮播那套

html

<div class="banner">
                      <div class="lunbo" id="box">
                        <div id="prev" class="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" class="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>
                          
                                 <ul>
                                    <li>
                                        <img src="img/banner1.jpg" >
                                    </li>
                                     <li>
                                        <img src="img/banner2.jpg" >
                                    </li>
                                    <li>
                                       <img src="img/banner3.jpg" >
                                    </li>
                                    <li>
                                       <img src="img/banner1.jpg" >
                                    </li>
                                </ul>
                                <ol>
                                    <li class="current"></li>
                                       <li></li><li></li>
                                </ol>
                            </div>
        </div>

css

 .banner{
                            text-align: center;
                            position: relative;
                            height: 300px;
                            overflow: hidden;
                        }
                        .banner ul{
                            width: 400%;
                            position: absolute;
                            display: flex;
                        }
                        .banner ul li{
                            list-style: none;
                            width: 100%;
                            
                        }
                        ol{
                            position: absolute;
                            z-index: 10;
                            bottom: 10px;
                            left: 0;
                            right: 0;
                            margin: 0 auto;
                        }
                        ol li{
                            display: inline-block;
                            width: 20px;
                            height: 20px;
                            background-color: #003D85;
                            margin: 0 10px;
                            border-radius: 100px;
                        }
                        ol li.current{
                            background-color: #269D01;
                        }
                        .banner img{
                            width: 100%; 
                            height: 300px;
                        }
                        #prev,#next{
                            position: absolute;
                            z-index: 100;
                            top: 46%;
                            background-color: #999999;
                            border-radius: 100%;
                            padding: 5px;
                            
                        }
                        #prev{
                            left: 20px;
                        }
                        #next{
                            right:20px;
                        }

js

   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);
            }
            

 面向对象版改：

 

    function Carousel(id){
                this.screen=document.getElementsByClassName(id)[0], //轮播图显示区域div
                this.ul=document.querySelector('.'+id+' ul'), //显示图片的ul
                this.ol=document.querySelector('.'+id+" ol"), //显示页码的ol
                this.left=document.querySelector('.'+id+" .prev"), //上一张箭头
                this.right=document.querySelector('.'+id+" .next"), //下一张箭头
                this.index=0, ////声明一个变量记录图片的索引，默认第0张图片
                this.timeId="",
                this.ultimer="",
                this.isLeft="",
                this.ulleft='',
                this.right.onclick=function(){
                     this.scroll();
                     console.log(this.right);
                }.bind(this);
                this.left.onclick=function(){
                    //(1)边界检测，如果当前已经是第一张，则不做任何处理
                    if(this.index==0){
                        //无限轮播原理：如果当前是第一张，则偷偷修改ul的位置是最后一张(第一张与最后一张是同一张图片)
                        this.index=this.ul.children.length-1; //index恢复到最后一张
                        this.ul.style.left=-this.index*this.screen.offsetWidth+"px"; ////ul回到最后一张位置
                    }
                    //(2)索引自减
                    this.index--;
                     // (3)向左移动ul：目标距离 = -screen的宽度 * 索引
                    this.animationMove(this.ul,-this.index*this.screen.offsetWidth,10);
                    this.indexShow(); //同步页码样式
                }.bind(this);
            }
            Carousel.prototype.cliol=function(){

    　　　　　　for(var i=0;i<this.ol.children.length;i++){
                 //4.1 循环遍历数组时给每一个页码添加一个liIndex属性记录下标
                this.ol.children[i].liIndex=i;
                                 var that=this;
                this.ol.children[i].onclick= function () {
                                    
                    that.index= this.liIndex-1;
                                   
                    that.scroll(); 
                };
            }

            }
            Carousel.prototype.scroll=function(){
                //（1）边界检测：如果当前已经是最后一张(第n+1张,n代表需要轮播的图片数量)
                console.log(this)
                if(this.index==this.ul.children.length-1){
                    //无限轮播的原理就是滚动到最后一张的时候，偷偷快速的改变ul的位置到第一张(不要任何动画，一瞬间改变)
                    this.index=0; //index恢复到0
                    this.ul.style.left=0+"px"; //ul回到初始位置
                }
                console.log(this)
                // (2)索引自增
                this.index++;
                // (3)向右移动ul：目标距离 = -screen的宽度 * 索引
                
                this.animationMove(this.ul,-this.index*this.screen.offsetWidth,10);
                this.indexShow(); //同步页码样式
            }
            Carousel.prototype.indexShow=function(){
                console.log(this)
                for(var i=0;i<this.ol.children.length;i++){
                    if(i==this.index){
                        this.ol.children[i].classList.add("current");
                    }else{
                        this.ol.children[i].classList.remove("current");
                    }
                    //特殊情况：当index为最后一张的时候，页码应该显示第一张
                    if(this.index==this.ul.children.length-1){
                        this.ol.children[0].classList.add("current");
                    }
                }
            }
            // 封装一个滚动动画函数
            Carousel.prototype.animationMove=function(obj,target,speed){
                var c=-this.index*this.screen.offsetWidth;
                console.log("ani");
                console.log(this.ultimer);
                
                clearInterval(this.ultimer);  //每次执行动画先清除原有的定时器
                this.ultimer=setInterval(function () {
                    
                    this.ulleft=this.ul.offsetLeft; //获取当前位置
                   this.isLeft=this.ul.offsetLeft>c?true:false;   //是否往左走
                   
                   if(this.isLeft){
                       this.ulleft-=10;    //往左走
                     
                   }else{
                       this.ulleft+=10;    //往右走
                      
                   }
                   if(this.isLeft?this.ulleft>c:this.ulleft<c){
                       
                      this.ul.style.left=this.ulleft+"px";  //如果当前位置不是在目标位置则进行位置处理
                     
                   }else{
                       clearInterval(this.ultimer);
                      this.ul.style.left=c+"px";
                   }
                   
                }.bind(this),speed);
            }
            Carousel.prototype.init=function(){
                var that=this;
                this.timeId=setInterval(this.scroll.bind(this),5000);
                this.cliol();
            }
              

创建实例,注.lunbo可替换，结构如上面html中的代码

var car1=new Carousel('lunbo');
            car1.init();