原生JS实现无缝轮播图片

 function animove(obj,distance,speed,callback) { //调用的变量 目标距离 速度 回调函数 clearInterval(obj.timer); obj.timer = setInterval(function () { let step = (distance - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == distance) { clearInterval(obj.timer); if (callback) { callback(); } } obj.style.left = obj.offsetLeft + step + 'px'; },speed) }

 * { margin: 0; padding: 0; } ul,li { list-style: none; } .box { width: 1226px; height: 460px; margin: 100px auto; position: relative; overflow: hidden; } .pic-box { width: 4904px; position: absolute; } .pic-box > li { float: left; } .point { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .point > li { float: left; width: 8px; height: 8px; border: 1px solid blueviolet; margin: 0 4px; border-radius: 50%; } .point > .active { background-color: orange; } .left-btn, .right-btn { width: 50px; height: 40px; background-color: rgba(0,0,0,.5); text-align: center; line-height: 40px; font-size: 20px; color: white; position: absolute; top: 50%; transform: translateY(-50%); } .left-btn { left: 0; } .right-btn { right: 0; }

 
 
 
 
 
 
 
<
>

 let picbox = document.querySelector('.pic-box'); let pic = document.querySelectorAll('.pic-box > li'); //由于获取的不是动态的 所以之后的克隆 并不会使这个变量发生改变 let point = document.querySelector('.point'); let leftbtn = document.querySelector('.left-btn'); let rightbtn = document.querySelector('.right-btn'); let carouselindex = 0; //通过for循环 生成小圆点 并将圆点添加到ul里 for (let i = 0; i  pic.length) { //如果索引大于图片数量 由于数量大小获取的是静态的 所以长度不会因为克隆变化而变化 picbox.style.left = "0px"; //如果大于索引说明此时要离开克隆的那张图 此时迅速将left值设置为0 carouselindex = 1; //然后将索引设置为1 } carousel(carouselindex); //这时候就在left为0的位置 过渡到索引1的位置 实现无缝轮播的效果 }); leftbtn.addEventListener('click',function () { //左边点击事件 carouselindex --; //减减 if (carouselindex <0) { //如果索引值小于0 carouselindex = 2; //将索引值设置为2 picbox.style.left = "-3678px"; //将位置迅速变换为第四张图的位置（克隆的图） } carousel(carouselindex); //由克隆的图过渡到索引为2的图（第三张图） })