本文實(shí)例為大家分享了js編寫無縫輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

前言

這個(gè)是一個(gè)輪播圖

提示：

請(qǐng)讓最后一個(gè)img和第一個(gè)img是一張圖片相同且 li數(shù)目為img數(shù)目-1；

一、無縫輪播圖

讓第一張和最后一張相同type:第一張和最后一張相同；在最后一張向下一張切換時(shí)，立刻跳到第一張 然后向第二張正常切換

二、使用步驟

1.html代碼

代碼如下（示例）：

<div class='banner'> <div class='qh'> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class='left'></div> <div class='right'></div> <ul class='banner_img clear'> <li> <img src='http://www.gepszalag.com/bcjs/img/1.png' alt=''> </li> <li> <img src='http://www.gepszalag.com/bcjs/img/2.png' alt=''> </li> <li> <img src='http://www.gepszalag.com/bcjs/img/3.png' alt=''> </li> <li> <img src='http://www.gepszalag.com/bcjs/img/4.png' alt=''> </li> <li> <img src='http://www.gepszalag.com/bcjs/img/5.png' alt=''> </li> <li> <img src='http://www.gepszalag.com/bcjs/img/6.png' alt=''> </li> <li> <img src='http://www.gepszalag.com/bcjs/img/7.png' alt=''> </li> <li> <img src='http://www.gepszalag.com/bcjs/img/1.png' alt=''> </li> </ul></div>

css代碼

*{ margin:0; padding:0;} .banner { position: relative; margin: auto; margin-top: 20px; width: 1140px; height: 600px; border: 1px solid #000; overflow: hidden; } .banner ul { position: relative; width: 10000px; } .banner ul li { width: 1140px; height: 100%; float: left; } .banner ul img { width: 1140px; height: 100%; object-fit: cover; } .banner>div { position: absolute; } .banner .qh { position: absolute; bottom: 0; right: 0; height: 20px; z-index: 1; } .banner .qh div { margin-right: 10px; width: 10px; height: 10px; background: transparent; border: 1px solid #f0f; border-radius: 5px; float: left; z-index: 1; } .left{ top: 0; bottom: 0; margin: auto; height: 40px; width: 20px; background: #f0f; left: 0; z-index: 1; } .right{ top: 0; bottom: 0; margin: auto; height: 40px; background: #f0f; width: 20px; right: 0; z-index: 1; }

2.js代碼

代碼如下：

startMove是一個(gè)運(yùn)動(dòng)框架 緩沖運(yùn)動(dòng)；當(dāng)然你也可以用其他的

var odiv = document.querySelector('.banner');var oul = document.querySelector('.banner_img');var aimg = oul.querySelectorAll('img');var oqh = document.querySelector('.qh')var aqh_div = oqh.querySelectorAll('div');var alist = aimg[0].offsetWidth;var i=0; init(); function init(){ for (var j=0; j<aimg.length-1;j++) { aqh_div[j].style.background='transparent'; } if (i<aimg.length-1) { aqh_div[i].style.background='#f0f'; }else{ aqh_div[0].style.background='#f0f'; } } function next() {//下一張 i++; let left =i*(-alist); if (left <= -alist * (aimg.length)) { oul.style.left = '0px'; i=1; left =-alist*i; } startMove(oul, { left: left }); init(); } function back() {//上一張 i--; let left = i*(-alist); if(i<0) { oul.style.left = (aimg.length-1)* (-alist)+'px'; i=aimg.length-2; left= i*(-alist); } startMove(oul, { left: left }); init(); } function move(i) {//跳到第i張 i從0開始 window.i=i; left = i* (-alist); startMove(oul, { left: left }); init(); } for (let i in aqh_div) { aqh_div[i].onclick = function () { move(i); console.log(i); } }//下面是一個(gè)移入div暫停計(jì)時(shí)器 移出打開計(jì)時(shí)器 odiv.Interval = setInterval(next, 2000); odiv.onmouseenter = function () { clearInterval(odiv.Interval); }; odiv.onmouseleave = function () { clearInterval(odiv.Interval); odiv.Interval = setInterval(next, 2000); };//下面是兩個(gè)左右切換的按鈕 var left_btn=document.querySelector('.left'); var right_btn=document.querySelector('.right'); left_btn.onclick=function(){ back(); } right_btn.onclick=function(){ next(); }//下面是一個(gè)運(yùn)動(dòng)框架 第一個(gè)參數(shù)是運(yùn)動(dòng)的對(duì)象 第二個(gè)為json對(duì)象{要改變的屬性：值}// 第三個(gè)為運(yùn)動(dòng)結(jié)束后要做到事情 參數(shù)是一個(gè)函數(shù) /** * * @param obj 運(yùn)動(dòng)的對(duì)象 * @param json {width:400, height:400} * @param fnEnd回調(diào) */ function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var bStop = true; for (attr in json) { // 1. 取得當(dāng)前的值（可以是widht，height，opacity等的值） var objAttr = 0; if (attr == 'opacity') { objAttr = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { objAttr = parseInt(getStyle(obj, attr)); } // 2.計(jì)算運(yùn)動(dòng)速度 var iSpeed = (json[attr] - objAttr) / 50;//緩沖運(yùn)動(dòng) iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); // 3. 檢測(cè)所有運(yùn)動(dòng)是否到達(dá)目標(biāo) if (objAttr != json[attr]) { bStop = false; } if (attr == 'opacity') { obj.style.filter = ’alpha(opacity=’ + (objAttr + iSpeed) + ’)’; obj.style.opacity = (objAttr + iSpeed) / 100; } else { obj.style[attr] = objAttr + iSpeed + ’px’;// 需要又.屬性名的形式改成[] } } if (bStop) { // 表示所有運(yùn)動(dòng)都到達(dá)目標(biāo)值 clearInterval(obj.timer); if (fn) { fn(); } } }, 10); } /** * 獲取行間/內(nèi)聯(lián)/外部樣式，無法設(shè)置 * @param obj * @param attr */ function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } }

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

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