本文實例為大家分享了JS實現(xiàn)無縫輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

運(yùn)動插件

function animove(obj,distance,speed,callback) { //調(diào)用的變量 目標(biāo)距離 速度 回調(diào)函數(shù) 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='http://www.lshqa.cn/bcjs/lb.webp' alt=''> </li> <li> <img src='http://www.lshqa.cn/bcjs/lb2.webp' alt=''> </li> <li> <img src='http://www.lshqa.cn/bcjs/pic3.jpg' alt=''> </li> </ul> <ul class='point'> </ul> <div class='left-btn'><</div> <div class='right-btn'>></div> </div><script src='http://www.lshqa.cn/bcjs/運(yùn)動插件.js'></script>

js代碼

let picbox = document.querySelector(’.pic-box’); let pic = document.querySelectorAll(’.pic-box > li’); //由于獲取的不是動態(tài)的 所以之后的克隆 并不會使這個變量發(fā)生改變 let point = document.querySelector(’.point’); let leftbtn = document.querySelector(’.left-btn’); let rightbtn = document.querySelector(’.right-btn’); let carouselindex = 0; //通過for循環(huán) 生成小圓點(diǎn) 并將圓點(diǎn)添加到ul里 for (let i = 0; i < pic.length; i ++) { let pointli = document.createElement(’li’); pointli.classList.add(i); point.appendChild(pointli); } //給第一個小圓點(diǎn)默認(rèn)添加active point.children[0].classList.add(’active’); //克隆第一個圖片 深度 let kelon = picbox.children[0].cloneNode(true); picbox.appendChild(kelon); //將圖片添加到最后位置 //獲取所以圓點(diǎn) let pointli = document.getElementsByClassName(’point’)[0].getElementsByTagName(’li’); //輪播方法 function carousel(index) { let distance = (-index * pic[0].offsetWidth); //計算行走的距離 圖片的index值乘以圖片的大小 animove(picbox,distance,10); //調(diào)用運(yùn)動函數(shù) for (let i = 0; i < pointli.length; i ++) { //for循環(huán)移除每個小點(diǎn)的選中狀態(tài) pointli[i].classList.remove(’active’); } if (index != pic.length) { //如果不等于pic的長度 就執(zhí)行 pointli[index].classList.add(’active’); } else { //如果索引值為3 說明此時圖片為克隆的圖 而圓點(diǎn)的最大索引值為2 將第一個圓點(diǎn)設(shè)置為active即可正常顯示圓點(diǎn)狀態(tài) point.children[0].classList.add(’active’); } } Array.prototype.forEach.call(pointli,function (item,index) { //給每個圓點(diǎn)添加點(diǎn)擊事件 item.addEventListener(’click’,function () { carouselindex = index; //將點(diǎn)擊的索引值賦值給輪播索引全局變量 carousel(carouselindex); }) }); rightbtn.addEventListener(’click’,function () { //右邊點(diǎn)擊事件 carouselindex ++; //每次點(diǎn)擊全局輪播索引增加 if (carouselindex > pic.length) { //如果索引大于圖片數(shù)量 由于數(shù)量大小獲取的是靜態(tài)的 所以長度不會因為克隆變化而變化 picbox.style.left = '0px'; //如果大于索引說明此時要離開克隆的那張圖 此時迅速將left值設(shè)置為0 carouselindex = 1; //然后將索引設(shè)置為1 } carousel(carouselindex); //這時候就在left為0的位置 過渡到索引1的位置 實現(xiàn)無縫輪播的效果 }); leftbtn.addEventListener(’click’,function () { //左邊點(diǎn)擊事件 carouselindex --; //減減 if (carouselindex < 0) { //如果索引值小于0 carouselindex = 2; //將索引值設(shè)置為2 picbox.style.left = '-3678px'; //將位置迅速變換為第四張圖的位置（克隆的圖） } carousel(carouselindex); //由克隆的圖過渡到索引為2的圖（第三張圖）})

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。