利用原生JavaScript怎么實現一個pc端的輪播圖效果

利用原生JavaScript怎么實現一個pc端的輪播圖效果？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

案例：輪播圖需求

布局：ul下有很多li標簽；浮動在一行；

原理：切換圖片的時候，把ul位置修改一下，給ul的父容器，設置一個 overflow:hidden；

功能需求：

• 序號輪播

• 左右按鈕的輪播

• 自動輪播

• 鼠標在輪播圖里面的時候，停止自動輪播，離開后繼續自動輪播
  

實現效果：

html部分

<div class="box" id="box">
    <div class="inner" id="inner">
      <ul id="imglist">
        <li>
          <a href="#" ><img src="images/1.jpg" alt=""></a>
        </li>
        <li>
          <a href="#" ><img src="images/2.jpg" alt=""></a>
        </li>
        <li>
          <a href="#" ><img src="images/3.jpg" alt=""></a>
        </li>
        <li>
          <a href="#" ><img src="images/4.jpg" alt=""></a>
        </li>
        <li>
          <a href="#" ><img src="images/5.jpg" alt=""></a>
        </li>
        <li>
          <a href="#" ><img src="images/6.jpg" alt=""></a>
        </li>
      </ul>
      <div class="list">
        <i class="current">1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
        <i>6</i>
      </div>
      <div class="arrow">
        <span class="arrow-left">&lt;</span>
        <span class="arrow-right">&gt;</span>
      </div>
    </div>
</div>

css部分

* {
      margin: 0;
      padding: 0;
    }
    
    ul {
      list-style: none;
    }
    
    .box {
      width: 730px;
      height: 454px;
      padding: 8px;
      border: 1px solid green;
      margin: 100px auto;
    }
    
    .inner {
      position: relative;
      overflow: hidden;
      height: 454px;
    }
    
    #imglist {
      width: 700%;
      position: absolute;
      left: 0;
      transition: left 300ms linear;
    }
    
    li {
      float: left;
    }
    
    .list {
      position: absolute;
      bottom: 20px;
      left: 50%;
      margin-left: -85px;
    }
    
    .list i {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fff;
      color: #333;
      float: left;
      font-style: normal;
      line-height: 20px;
      font-size: 14px;
      text-align: center;
      margin-right: 10px;
      cursor: pointer;
    }
    
    .list i:last-child {
      margin-right: 0;
    }
    
    .list i.current {
      background-color: skyblue;
      color: #fff;
    }
    
    .arrow {
      position: absolute;
      width: 100%;
      top: 50%;
      margin-top: -30px;
    }
    
    .arrow-left,
    .arrow-right {
      width: 30px;
      height: 60px;
      position: absolute;
      font: 20px/60px "consolas";
      color: #fff;
      background-color: rgba(0, 0, 0, .3);
      text-align: center;
      cursor: pointer;
    }
    
    .arrow-right {
      right: 0;
    }

js部分：

 // 獲取DOM
  var yuan = document.querySelectorAll("i");
  var li = document.querySelector("ul li");
  var ul = document.querySelector("ul");
  var imgs = document.querySelector("#imglist");
  var right = document.querySelector(".arrow-right");
  var left = document.querySelector(".arrow-left");
  var box = document.querySelector(".box");
  window.onload = function() {
    //------------------------------------這里是點擊小圓圈，控制圖片的切換
    //循環小圓點 注冊小圓點
    for (var i = 0; i < yuan.length; i++) {
      //我們需要這里面的i 必須提前拿出來，要不最后i的值就是最后一個數值了
      yuan[i].num = i;
      //注冊事件
      yuan[i].onmouseover = function() {
        // 現在要循環將樣式移除
        for (var j = 0; j < yuan.length; j++) {
          yuan[j].classList.remove("current");
        }
        //這里是為了將點擊的小圓點 增加上樣式
        this.classList.add("current");
        var num = this.num;
        //到這里的思路就是點擊小圓點 將圖片進行移動，向左面移動，上面css做了相應的定位操作
        //移動的距離就是 n 乘以 一張圖片的寬度，
        //n 就是選擇的小圓點的 坐標-----i(num)
        //圖片的寬度 box.offsetWidth
        var left = num * li.offsetWidth;
        // console.log(num, box.offsetWidth, left);
        imgs.style.left = `-${left}px`;

        //這里小原點聯動左右按鈕
        for (var p = 0; p < yuan.length; p++) {
          //清除全部樣式（小圓點）
          yuan[p].classList.remove("current");
        }
        //給當前的小圓點增加樣式
        yuan[num].classList.add("current");
        //這里這個位置比較關鍵，在上面設置完樣式之后，記得將此num賦值給全局的index
        index = this.num;


      }
    }
    //------------------------------------以上是點擊小圓圈，控制圖片的切換
    //------------------------------------下面是開始右面輪播，控制圖片的切換
    //首先定義一個全局的index，這個index的作用依舊是控制圖片的切換
    var index = 0;
    right.onclick = function() {
      index++;
      //這里要對index做一下判斷，如果不做判斷，可以試想一下，
      //只要你一點擊，index就會無限的增大，增大到你“無法自拔”
      if (index == ul.children.length) {
        //如果坐標為6的話，顯示應該顯示第1張圖片，所以要復位 即index=0
        index = 0;
      }
      var left = index * li.offsetWidth;
      // console.log(index, box.offsetWidth, left);
      imgs.style.left = `-${left}px`;

      //點擊右面增加聯動小圓點的效果
      for (var n = 0; n < yuan.length; n++) {
        //清除全部樣式（小圓點）
        yuan[n].classList.remove("current");
      }
      //給當前的小圓點增加樣式
      yuan[index].classList.add("current");
    };
    //------------------------------------以上是結束右面輪播，控制圖片的切換

    //------------------------------------下面是開始左面輪播，控制圖片的切換
    left.onclick = function() {
      index--;
      //這里同右點擊一樣，需要做一下判斷，
      console.log(index);
      if (index == -1) {
        index = ul.children.length - 1;
      }
      var left = index * li.offsetWidth;
      // console.log(index, box.offsetWidth, left);
      // console.log(left);
      imgs.style.left = `-${left}px`;

      //這個位置做的是 左面點擊聯動小圓點
      for (var m = 0; m < yuan.length; m++) {
        //清除全部樣式（小圓點）
        yuan[m].classList.remove("current");
      }
      //給當前的小圓點增加樣式
      yuan[index].classList.add("current");
    };
    //------------------------------------上面是結束左面輪播，控制圖片的切換
    //------------------------------------開始設置自動輪播
    var timer = setInterval(function() {
      right.onclick();
    }, 1000);
    //------------------------------------以上是自動輪播結束
    //------------------------------------設置鼠標進來就停止開始
    box.onmouseover = function() {
      clearInterval(timer);
    };
    //------------------------------------設置鼠標進來就停止結束
    //------------------------------------設置鼠標出去就停止開始
    box.onmouseout = function() {
      timer = setInterval(function() {
        right.onclick();
      }, 1000);
    };
    //------------------------------------設置鼠標出去就停止結束
  }

看完上述內容，你們掌握利用原生JavaScript怎么實現一個pc端的輪播圖效果的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！