用原生js实现无缝轮播图，供大家参考，具体内容如下
index.js：
var config = { imgWidth:380,//图片尺寸 dotWidth:8,//小圆点尺寸 doms:{ divImgs:document.querySelector('.imgs'), divDots:document.querySelector('.circle'), divDirection:document.querySelector('.direction'), divContainer:document.querySelector('.container') }, curIndex:0,//实际图片索引，0 ~ imgNumber-1 timer:{ duration:16,//运动间隔时间 total:1000,//总时间 id:null//计时器编号 } } //图片的数量 config.imgNumber = config.doms.divImgs.children.length; //初始化元素尺寸 config.imgsWidth = (config.imgNumber + 2)*config.imgWidth; config.dotsWidth = (config.imgNumber + 2)*config.dotWidth; //初始化 function inti(){ intiWidth(); intiCount(); intiElement(); intiPosition(); function intiWidth(){ config.doms.divImgs.style.width = config.imgsWidth + 'px'; config.doms.divDots.style.width = config.dotsWidth + 'px'; } function intiCount(){ for(var i = 0; i < config.imgNumber; i ++){ var p = document.createElement('p'); config.doms.divDots.appendChild(p); } } function intiElement(){ var first = config.doms.divImgs.children[0],last = config.doms.divImgs.children[config.imgNumber-1]; var newImg = first.cloneNode(true);//深度克隆 config.doms.divImgs.appendChild(newImg); newImg = last.cloneNode(true); config.doms.divImgs.insertBefore(newImg,first); } function intiPosition(){ var left = (-config.curIndex-1)*config.imgWidth; config.doms.divImgs.style.marginLeft = left + 'px'; setDots();//小圆点的激活状态位置设置 } } inti(); //小圆点的激活状态位置设置 function setDots(){ for(var i = 0; i < config.doms.divDots.children.length; i++){ var dot = config.doms.divDots.children[i]; if(i === config.curIndex){ dot.className = 'select'; }else{ dot.className = ''; } } } /* 图片切换 index: 图片索引 directions: 图片切换方向（left,right） */ function switchTo(index,directions){ if(index === config.curIndex){ return; } if(!directions){ directions = 'right';//默认状态下向右切换图片 } //最终的显示图片; 图片容器的marginLeft var newLeft = (-index-1)*config.imgWidth; animateSwitch(); //config.doms.divImgs.style.marginLeft = newLeft + 'px'; //小圆点的激活状态位置设置 config.curIndex = index; setDots(); //一张图片的总运动次数 var number = Math.ceil(config.timer.total/config.timer.duration); //当前运动次数 var curNumber = 0; var distance,//总运动距离 totalWidth = config.imgNumber*config.imgWidth, marginLeft = parseFloat(getComputedStyle(config.doms.divImgs).marginLeft); if(directions === 'left'){ if(newLeft < marginLeft){ distance = newLeft - marginLeft; }else{ distance = -(totalWidth-Math.abs(newLeft - marginLeft)); } } if(directions === 'right'){ if(newLeft > marginLeft){ distance = newLeft - marginLeft; }else{ distance = totalWidth-Math.abs(newLeft - marginLeft); } } //每次改变的距离 var everDistence = distance/number; //逐步改变marginLeft function animateSwitch(){ clearAnimate(); config.timer.id = setInterval(function(){ marginLeft += everDistence; if(directions === 'left' && Math.abs(marginLeft) > totalWidth){ marginLeft += totalWidth; } else if(directions === 'right' && Math.abs(marginLeft) < config.imgWidth){ marginLeft -= totalWidth; } config.doms.divImgs.style.marginLeft = marginLeft + 'px'; curNumber ++; if(curNumber === number){ clearAnimate(); } },config.timer.duration); } //清空计时器 function clearAnimate(){ clearInterval(config.timer.id); config.timer.id = null; } } //默认情况下自动向右轮播图片 var timer = setInterval(function(){ toRight(); },2000); config.doms.divContainer.onmouseleave = function() { timer = setInterval(function(){ toRight(); },2000); } //鼠标移出则清空定时器 config.doms.divContainer.onmouseover = function() { clearInterval(timer); } //左右点击事件 config.doms.divDirection.onclick = function(e){ clearInterval(timer); if(e.target.classList.contains('left')){ toLeft(); } if(e.target.classList.contains('right')){ toRight(); } } function toLeft(){ var index = config.curIndex - 1; if(index < 0){ index = config.imgNumber - 1; } switchTo(index,'right'); } function toRight(){ var index = config.curIndex + 1; if(index > config.imgNumber - 1){ index = 0; } switchTo(index,'left'); } //小圆点点击事件 config.doms.divDots.onclick = function(e){ if(e.target.tagName === 'P'){ var index = Array.from(this.children).indexOf(e.target); switchTo(index,index > config.curIndex? 'left' : 'right') } }
index.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝轮播图</title> <link href="https://www.jb51.net/index.css" > </head> <body> <div> <div> <img src="https://www.jb51.net/imagejpg/1.jpg" alt=""> <img src="https://www.jb51.net/imagejpg/2.jpg" alt=""> <img src="https://www.jb51.net/imagejpg/3.jpg" alt=""> </div> <div> <!-- <p></p> <p></p> <p></p> <p></p> <p></p> --> </div> <div> <div><</div> <div>></div> </div> </div> <script src="https://www.jb51.net/article/index.js"> </script> </body> </html>
index.css：