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

前言

這個是一個輪播圖

提示：

請讓最后一個img和第一個img是一張圖片相同且 li數目為img數目-1；

一、無縫輪播圖

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

二、使用步驟

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.piao2010.com/bcjs/img/1.png' alt=''> </li> <li> <img src='http://www.piao2010.com/bcjs/img/2.png' alt=''> </li> <li> <img src='http://www.piao2010.com/bcjs/img/3.png' alt=''> </li> <li> <img src='http://www.piao2010.com/bcjs/img/4.png' alt=''> </li> <li> <img src='http://www.piao2010.com/bcjs/img/5.png' alt=''> </li> <li> <img src='http://www.piao2010.com/bcjs/img/6.png' alt=''> </li> <li> <img src='http://www.piao2010.com/bcjs/img/7.png' alt=''> </li> <li> <img src='http://www.piao2010.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是一個運動框架 緩沖運動；當然你也可以用其他的

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); } }//下面是一個移入div暫停計時器 移出打開計時器 odiv.Interval = setInterval(next, 2000); odiv.onmouseenter = function () { clearInterval(odiv.Interval); }; odiv.onmouseleave = function () { clearInterval(odiv.Interval); odiv.Interval = setInterval(next, 2000); };//下面是兩個左右切換的按鈕 var left_btn=document.querySelector('.left'); var right_btn=document.querySelector('.right'); left_btn.onclick=function(){ back(); } right_btn.onclick=function(){ next(); }//下面是一個運動框架 第一個參數是運動的對象 第二個為json對象{要改變的屬性：值}// 第三個為運動結束后要做到事情 參數是一個函數 /** * * @param obj 運動的對象 * @param json {width:400, height:400} * @param fnEnd回調 */ function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var bStop = true; for (attr in json) { // 1. 取得當前的值（可以是widht，height，opacity等的值） var objAttr = 0; if (attr == 'opacity') { objAttr = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { objAttr = parseInt(getStyle(obj, attr)); } // 2.計算運動速度 var iSpeed = (json[attr] - objAttr) / 50;//緩沖運動 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); // 3. 檢測所有運動是否到達目標 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) { // 表示所有運動都到達目標值 clearInterval(obj.timer); if (fn) { fn(); } } }, 10); } /** * 獲取行間/內聯/外部樣式，無法設置 * @param obj * @param attr */ function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } }

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。