輪播動畫來提升頁面的顏值和互動效能，下面我們將一起學習利用html,和等前端開發基礎知識來製作一個簡單的輪播圖。

輪播圖簡介：在一個的某一特定模組，通過電腦上滑鼠點選或滑鼠移入、手機上手指滑動後，可以分別展示不同的圖片，這個模組就叫做輪播模組。

(做的不好的地方歡迎各位大佬批評指正,感覺有幫助的同學麻煩給顆星星哦~)

html佈局部分:

<div id="box">
    <div class="scenery pic">
      <img class="show" src="imgs/s2.jpg" alt="scenery">
      <img src="imgs/s3.jpg" alt="scenery">
      <img src="imgs/s1.jpg" alt="scenery">
      <img src="imgs/s5.jpg" alt="scenery">
      <img src="imgs/s4.jpg" alt="scenery">
    </div>
    <div class="car pic">
      <img srcAMosvD
 
="imgs/animal4.jpg" alt="animal">
      <img src="imgs/animal3.jpg" alt="animal">
      <img src="imgs/animal2.jpg" alt="animal">
      <img src="imgs/animal1.jpg" alt="animal">
    </div>
    <div class="entertainment pic">
      <img src="imgs/entertainment1.jpg" alt="entertainment">
      <img src="imgs/entertainment2.jpg" alt="entertainment">
      <img src="imgs/entertainment3.jpg" alt="entertainment">
      <img src="imgs/entertainment4.jpg" alt="entertainment">
      <img src="imgs/entertainment5.jpg" alt="entertainment">
    </div>
    <div class="leftbar">
      <div class="checked">風景</div>
      <div>名車</div>
      <div>娛樂</div>
    </div>
    <div class="bottombar">
 
    </div>
</div>

CSS樣式部分:

/* 為了佈局方便,容器裡大多采用的flex */
#box {
      position: relative;
      width: 460px;
      height: 300px;
      margin: 40px auto;
      border: 1px solid rgb(109,98,98);
      user-select: none;
    }
    /* 側邊欄佈局 */
    .leftbar {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: absolute;
      top: -1px;
      left: -80px;
      width: 80px;
      height: 100%;
      text-align: center;
      font-size: 20px;
      cursor: pointer;
    }
 
    .leftbar div {
      flex: 1;
      line-height: 100px;
      background-color: cadetblue;
      letter-spacing: 5px;
    }
 
    .leftbar div:nth-child(2) {
      border-top: 1px solid #fff;
      border-bottom: 1px solid #fff;
    }
 
    /* 底部切換按鈕樣式設計 */
    .bottombar {
      display: flex;
      justify-content: space-between;
      position: absolute;
      bottom: -1px;
      right: -1px;
      z-index: 10;
      width: 200px;
      height: 30px;
      cursor: pointer;
    }
 
    .bottombar div {
      flex: 1;
      line-height: 30px;
      background-color: rgb(232,233,235,.5);
      text-align: center;
      font-weight: 700;
    }
 
    .bottombar div~div {
      border-left: 1px solid grey;
    }
 
    img {
      position: absolute;
      display: block;
      width: 460px;
      height: 300px;
    }
 
    .show {
      z-index: 5;
    }
 
    .leftbar .checked,.bottombar .checked {
      background-color: rgb(241,5,5);
    }

script邏輯實現部分:

var Box = document.querySelector('#box'),pic = Box.querySelectorAll('.pic'),Idx = 0,index = 0,timer = null,ltDiv = Box.querySelector('.leftbar'),btDiv = Box.querySelector('.bottombar'),Img = Box.querySelectorAll('img');
 
    function createBtBar(len) {//動態建立底部切換按鈕
      var str = '';
      for (var i = 0; i < len; i++) {
        str += `<div>${i + 1}</div>`;
      }
      btDiv.innerHTML = str;
      btDiv.children[0].classList.add('checked');
    }
 
    function initialize() {//頁面初始狀態
      createBtBar(pic[0].children.length);
    }
    initialize();
 
    function clearZindex() {//重置所有圖片的定位層級
      for (var k = 0; k < Img.length; k++) {
        Img[k].classList.remove('show');
      }
    }
 
    ltDiv.addEventListener('click',(e) => {//側邊欄專案切換
      if (e.target.tagName.toLowerCase() === 'div') {
        for (var j = 0; j < ltDiv.children.length; j++) {
          ltDiv.children[j].classList.remove('checked');
        }
 
        clearZindex();
        Idx = 0;
        index = getEleIdx(e.target);
        ltDiv.children[index].classList.add('checked');
        pic[index].children[0].classList.add('show');
        createBtBar(pic[index].children.length);
      }
    });
 
    btDiv.addEventListener('click',(e) => {//委託監聽底部切換按鈕
      if (e.target.tagName.toLowerCase() === 'div') {
        function changePic(callback) {
          btDiv.children[Idx].classList.remove('checked');
 
          clearZindex();
          callback && callback();
          btDiv.children[Idx].classList.add('checked');
          pic[index].children[Idx].classList.add('show');
        }
        changePic(function () {
          Idx = getEleIdxwww.cppcns.com(e.target);
        });
      }
    });
 
    function getEleIdx(item) {//獲取DOM元素下標
      var elements = item.parentNode.children;
      for (var i = 0,len = elements.length; i < len; i++) {
        if (item === elements[i]) {
          return i;
        }
      }
    }
 
    function loopShow(http://www.cppcns.com) {//迴圈自動展示
      clearInterval(timer);
      timer = setInterval(function () {
        pic[index].children[Idx].classList.remove('show');
        btDiv.children[Idx].classList.remove('checked');
        Idx += 1;
        if (Idx < 0 || Idx > pic[index].children.length - 1) {
          Idx = 0;
        }
        pic[index].chiAMosvDldren[Idx].classList.add('show');
        btDiv.children[Idx].classList.add('checked');
      },1000);
    }
 
    loopShow();
 
    Box.addEventListener('mouseover',function () {
      clearInterval(timer);//滑鼠移入展示區停止輪播
    });
    Box.addEventListener('mouseout',function () {
      loopShow();//滑鼠移出展示區自動輪播
    });

具體實現的展示效果入下:

(Tip: 各位注意自行準備圖片放到自己的資料夾裡哦~)

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