js无缝轮播图完整版

功能：1.自动播放 2.左右按钮依次改变图片 3.数字按钮改变图片
style 代码
*{margin: 0;padding: 0;list-style: none;}
#box{width: 1000px;height: 300px;border: 1px solid black;margin: 20px auto;position: relative;overflow: hidden;}
#box #imgbox img{width: 1000px; height: 300px;position: absolute;top: 0;left: 1000px;}
#box #imgbox img:nth-child(1){left: 0;}
input{width: 40px; height: 40px;background-color:#666;z-index: 1;position: absolute;top: 130px;border: none;text-align: center;}
#left{left: 0;}
#right{right: 0;}
ul{width: 1000px;height: 30px;position: absolute;left: 0;bottom: 0;background: aquamarine;opacity: 0.5;display: flex;}
ul li{float: left;flex: 1;text-align: center;line-height: 30px;border: 1px solid black;border-bottom: none;}

body

<div id="box">
    <div id="imgbox">
<img sr="https://img.zcool.cn/community/012dd25e55d09ba801216518b3709d.png" alt="">
<img sr="https://img.zcool.cn/community/01b67a5e55d1f1a80120a8957126ef.png" alt="">
        <img sr="https://img.zcool.cn/community/01db115e572a7aa8012165189d7874.jpg" alt="">
        <img sr="https://img.zcool.cn/community/0105515e55cf74a80120a895a76620.jpg" alt="">
    </div> 
    <input type="button" id="left" value="<<<">
    <input type="button" id="right" value=">>>">
    <ul>
    </ul>
</div>

js代码

			 	class lunbo{
			    //  选择元素
			     constructor(){
			         this.box = document.getElementById("box");
			         this.left = document.getElementById("left");
			         this.right = document.getElementById("right");
			         this.child = document.querySelectorAll("#imgbox img");
			        //  console.log(this.child);
			        this.ull = document.querySelector("ul");
			        // console.log(this.ull);
			        this.inow = 0;
			        this.igo = this.child.length - 1;
			     }
			    //  绑定事件
			    shijian (){
			        var that = this;
			        this.left.onclick = function(){
			          that.chageindex(1);
			        }
			        this.right.onclick = function(){
			            that.chageindex(-1);
			        }
			        this.ull.onclick = function(eve){
			            var e =eve ||window.event;
			            var tar = e.target || e.srcElement;
			            if (tar.tagName == "LI") {
			                that.listchageindex(tar);
			                } 
			            }
			       }
			    // 改变索引  左右按钮的点击
			    chageindex(b){
			        // 表示左按钮
			        if (b==1) { 
			            if (this.inow == 0) {
			                this.inow =this.child.length-1;
			                this.igo = 0;
			            } else {
			                // this.inow--;
			                // this.igo = this.inow + 1;
			                this.igo = this.inow;
			                this.inow--;
			            }
			        } else {
			            if (this.inow == this.child.length-1) {
			                this.inow = 0;
			                this.igo = this.child.length-1;
			            } else {
			                this.inow++;
			                this.igo = this.inow - 1;
			            }
			        }
			        this.move(b);
			    }
			    // 运动方法(左右按钮)   运动前已改变索引  不同于运动2
			    move(b){
			        // 简化前
			            // if (b==1) {
			            //     
			            //     this.child[this.igo].style.left = 0;
			            //     move(this.child[this.igo],{left:1000});
			            //     
			            //     this.child[this.inow].style.left =-1000 + "px";
			            //     move(this.child[this.inow],{left:0});
			            // } else {
			            //     this.child[this.igo].style.left = 0;
			            //     move(this.child[this.igo],{left:-1000});
			            //     
			            //     this.child[this.inow].style.left =1000 + "px";
			            //     move(this.child[this.inow],{left:0});
			            // }
			        // 简化后
			            this.child[this.igo].style.left = 0;
			            move(this.child[this.igo],{left:this.child[0].offsetWidth * b});   
			            this.child[this.inow].style.left =-this.child[0].offsetWidth * b + "px";
			            move(this.child[this.inow],{left:0});
			            this.creat_li();
			    }
			    // 创建数字按钮 ul里的li   和图片数量一致
			        creat_li(){
			            var str = ``;
			            for (let i = 0; i < this.child.length; i++) {
			               str = str + `<li index =' ${i}'>${i+1}</li>`;
			            }
			            this.ull.innerHTML = str;
			            this.ull.children[this.inow].style.background = "red";
			        }
			        // 添加li点击事件的方法 改变索引
			        listchageindex(tar){
			            var index = parseInt(tar.getAttribute("index"));
			            // console.log(index);
			            if(index > this.inow){
			                // 向左运动(相当于右按钮)
			                this.listmove(-1,index);
			            }
			            if(index < this.inow){
			                // 向右运动
			                this.listmove(1,index);
			            }
			            this.inow = index;
			           this.creat_li();
			        }
			        // 运动2(数字按钮)
			        listmove(b,index){
			            this.child[this.inow].style.left = 0;
			            move(this.child[this.inow],{left:this.child[0].offsetWidth * b});
			            this.child[index].style.left =-this.child[0].offsetWidth * b + "px";
			            move(this.child[index],{left:0});
			        }
			        // 自动轮播
			        bofang(){
			            var that =this;
			            // 添加记时器
			            var t = setInterval(function () {
			                that.chageindex(-1);
			            },2000)
			            // 鼠标进入停止(清除记时器)
			            this.box.onmousemove = function() {
			                clearInterval(t);
			            }
			            // 鼠标离开继续执行
			            this.box.onmouseout = function() {
			                t = setInterval(function () {
			                that.chageindex(-1);
			            },2000)
			            }
			        }
			 }
			 var l = new lunbo();
			 l.shijian();
			l.creat_li();
			l.bofang();

注：插入图片 src
需插入运动封装代码；详见本人博客。