效果图：
实现思路：
上图黄色方块代表轮播图的排列位置，默认图片从start开始，切换到end的时候再往后走一个图片的宽度，到达chang的位置。此时通过js把盒子的transition过渡属性的时间置为0s，然后让盒子的位置切换到start的位置（此时看不到过度动画），再通过js把盒子的过渡属性置为n秒（n为滚动时间），继续自动切换，此为一个循环。
2.左点击无缝切换效果图:
实现思路：
当点击“左”按钮时，将盒子的偏移量减去一张图片的距离，盒子则向左偏移，当盒子的位置到达change位置的时候，清除定时器，把盒子的transition置为0s,把盒子的位置切换到start(因为change和start的图片是一样的，并且没有动画，所以看来就是没有切换)， 然后设置等待n秒后继续自动滚动。此为一个完整的循环。
3.右点击无缝切换效果图：
实现思路：
当点击“右”按钮时，将盒子的偏移量加一张图片的宽度，盒子则向右偏移，当盒子位置到达start前一张图片的位置时，清除定时器，把盒子的过渡的时间置为0s, 把盒子的位置设置到end的位置， 然后设置等待n秒继续自动滚动，此为一个循环。
二、代码实现 1.HTML代码 左 右 5 1 2 3 4 5 1 2.CSS代码 *{ margin: 0; padding: 0; } .outer{ position: relative; margin: 100px auto; width: 400px; height: 150px; overflow: hidden; } .on{ background-color: #bfa!important; } .inner{ position: relative; /* 此处输入一张图片宽度的负值(起始位置)*/ left: -400px; /* 总宽度 = 图片个数 * 一张图片宽度 */ width: 2800px; height: 150px; } li{ font-size: 50px; text-align: center; list-style: none; /* 图片盒子宽度 */ width: 400px; height: 100px; height: 100%; line-height: 150px; float: left; } .ctrlCircle{ position: absolute; bottom: 10px; left: 160px; } .ctrlCircle span{ cursor: pointer; border-radius: 50%; margin-right: 5px; display: inline-block; width: 10px; height: 10px; background-color: red; } .left{ cursor: pointer; z-index: 2; position: absolute; top: 71px; left: 10px; } .right{ cursor: pointer; z-index: 2; position: absolute; top: 71px; right: 10px; } .inner li:nth-child(1){ background-color: pink; } .inner li:nth-child(2){ background-color: yellow; } .inner li:nth-child(3){ background-color: skyblue; } .inner li:nth-child(4){ background-color: green; } .inner li:nth-child(5){ background-color: yellow; } .inner li:nth-child(6){ background-color: pink; } .inner li:nth-child(7){ background-color: yellow; } 3.JS代码 //包裹图片的盒子const inner = document.querySelector(".inner")//左边切换按钮const left = document.querySelector(".left")//右边切换按钮const right = document.querySelector(".right")//所有圆点const ctrlCircle = document.querySelectorAll(".ctrlCircle span")//原点的盒子(用来添加点击事件)const circleContaniner = document.querySelector(".ctrlCircle")//图片宽度var imgWidth = 400//此处输入一张图片的负值代表滚动到的位置var initLeft = -imgWidth//图片总数量var sumImg = 5//滚动一张图片的间隔var steptTime = 2000//自动滚动定时器var Scrolltimer//初始过渡动画inner.style.transition = "1s"//当前小圆点var thisCircle = 0//操作后重新启动定时器的时间var clickAfterTime = 3000//滚动函数var autoScroll = () => { for (let i = 0; i < ctrlCircle.length; i++) { ctrlCircle[i].className = "null" } thisCircle = -(initLeft / imgWidth) // if () if (thisCircle >= 5) thisCircle = 4 ctrlCircle[thisCircle].className = "on" initLeft -= imgWidth if (initLeft < (sumImg) * -imgWidth) { //迅速切换到第一张图片并把动画置为0s initLeft = 0 inner.style.transition = "0s" //此定时器用来控制切换完图片后重新加上过度动画 var animaAgain = setTimeout(() => { inner.style.transition = "1s" Scrolltimer = setInterval(autoScroll, steptTime) }, 50) clearInterval(Scrolltimer) } inner.style.left = initLeft + "px"}Scrolltimer = setInterval(autoScroll, steptTime)//左切换left.onclick = (e) => { clearInterval(Scrolltimer) for (let i = 0; i < ctrlCircle.length; i++) { ctrlCircle[i].className = "null" } //底下圆点跟随 thisCircle = -(initLeft / imgWidth) if (thisCircle >= 5) thisCircle = 0 ctrlCircle[thisCircle].className = "on" if (initLeft < (sumImg) * -imgWidth) { initLeft = 0 inner.style.transition = "0s" } else { inner.style.transition = "1s" } initLeft = ((initLeft / imgWidth) - 1) * imgWidth console.log(initLeft); inner.style.left = initLeft + "px" // 等待n秒重新启动自动滚动 var timerClickAfterScroll = setTimeout(() => { clearInterval(Scrolltimer) inner.style.transition = "1s" Scrolltimer = setInterval(autoScroll, steptTime) }, clickAfterTime)}//右切换right.onclick = () => { clearInterval(Scrolltimer) initLeft = ((initLeft / imgWidth) + 1) * imgWidth if (initLeft > 0) { initLeft = -(imgWidth * (sumImg)) inner.style.transition = "0s" } else { inner.style.transition = "1s" } inner.style.left = initLeft + "px" for (let i = 0; i < ctrlCircle.length; i++) { ctrlCircle[i].className = "null" } //底下圆点跟随 thisCircle = -(initLeft / imgWidth) - 1 if (thisCircle >= 5) thisCircle = 0 if (thisCircle { clearInterval(Scrolltimer) if (initLeft == -(sumImg + 1) * imgWidth) { initLeft = 0 inner.style.transition = "1s" } Scrolltimer = setInterval(autoScroll, steptTime) }, clickAfterTime)}circleContaniner.onclick = (e) => { //事件冒泡判断是否点击的是原点按钮 if (e.target.tagName == "SPAN") { //清除定时器 clearInterval(Scrolltimer) //拿到点击的index并且切换图片 initLeft = e.target.getAttribute("index") * -imgWidth inner.style.left = initLeft + "px" for (let i = 0; i < ctrlCircle.length; i++) { ctrlCircle[i].className = "null" } //底下圆点跟随 thisCircle = -(initLeft / imgWidth) - 1 if (thisCircle >= 5) thisCircle = 0 ctrlCircle[thisCircle].className = "on" //n秒以后重新启动定时器 var timerClickAfterScroll = setTimeout(() => { clearInterval(Scrolltimer) Scrolltimer = setInterval(autoScroll, steptTime) }, clickAfterTime) }}