原生JS实现无缝轮播图片

本文实例为大家分享了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)}

CSS代码

* { 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; }

HTML代码

<div class='box'> <ul class='pic-box'> <li> <img src='https://www.haobala.com/bcjs/lb.webp' alt=''> </li> <li> <img src='https://www.haobala.com/bcjs/lb2.webp' alt=''> </li> <li> <img src='https://www.haobala.com/bcjs/pic3.jpg' alt=''> </li> </ul> <ul class='point'> </ul> <div class='left-btn'><</div> <div class='right-btn'>></div> </div><script src='https://www.haobala.com/bcjs/运动插件.js'></script>

js代码

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; i ++) { let pointli = document.createElement(’li’); pointli.classList.add(i); point.appendChild(pointli); } //给第一个小圆点默认添加active point.children[0].classList.add(’active’); //克隆第一个图片 深度 let kelon = picbox.children[0].cloneNode(true); picbox.appendChild(kelon); //将图片添加到最后位置 //获取所以圆点 let pointli = document.getElementsByClassName(’point’)[0].getElementsByTagName(’li’); //轮播方法 function carousel(index) { let distance = (-index * pic[0].offsetWidth); //计算行走的距离 图片的index值乘以图片的大小 animove(picbox,distance,10); //调用运动函数 for (let i = 0; i < pointli.length; i ++) { //for循环移除每个小点的选中状态 pointli[i].classList.remove(’active’); } if (index != pic.length) { //如果不等于pic的长度 就执行 pointli[index].classList.add(’active’); } else { //如果索引值为3 说明此时图片为克隆的图 而圆点的最大索引值为2 将第一个圆点设置为active即可正常显示圆点状态 point.children[0].classList.add(’active’); } } Array.prototype.forEach.call(pointli,function (item,index) { //给每个圆点添加点击事件 item.addEventListener(’click’,function () { carouselindex = index; //将点击的索引值赋值给轮播索引全局变量 carousel(carouselindex); }) }); rightbtn.addEventListener(’click’,function () { //右边点击事件 carouselindex ++; //每次点击全局轮播索引增加 if (carouselindex > 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的图（第三张图）})

精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。