本文例項為大家分享了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="img/1.png" alt="js程式碼編寫無縫輪播圖">
      </li>
      <li>
        <img src="img/2.png" alt="js程式碼編寫無縫輪播圖">
      </li>
      <li>
        <img src="img/3.png" alt="js程式碼編寫無縫輪播圖">
      </li>
      <li>
        <img src="img/4.png" alt="js程式碼編寫無縫輪播圖">
      </li>
      <li>
        <img src="img/5.png" alt="js程式碼編寫無縫輪播圖">
      </li>
      <li>
        <img src="img/6.png" alt="js程式碼編寫無縫輪播圖">
      </li>
      <li>
        <img src="img/7.png" alt="js程式碼編寫無縫輪播圖">
      </li>
      <li>
        <img src="img/1.png" alt="js程式碼編寫無縫輪播圖">
      </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];
      }
    }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。