JS怎么用transform實(shí)現(xiàn)banner的無(wú)限滾動(dòng)

本篇內(nèi)容介紹了“JS怎么用transform實(shí)現(xiàn)banner的無(wú)限滾動(dòng)”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

 功能

•  默認(rèn)情況無(wú)限循環(huán)向右移動(dòng)

•  點(diǎn)擊數(shù)字切換到對(duì)應(yīng)圖片

•  點(diǎn)擊左右切換可切換圖片

原理

首先說(shuō)下原理。

1.  在布局上所有的圖片都是重疊的，即只要保證Y方向?qū)R即可，當(dāng)前可見(jiàn)的圖z-index層級(jí)最高。
   

2.  每隔3s中更換一張圖片，使用setTimeout定時(shí)。

3.  使用gIndex記錄當(dāng)前可視區(qū)域的展示的是哪張圖片下標(biāo)，每次更換，計(jì)算下一張圖片的下標(biāo)。

4.  通過(guò)requestAnimationFrame實(shí)現(xiàn)一次圖片切換的動(dòng)畫(huà)。

這種方法也可以做到整個(gè)頁(yè)面始終只有2個(gè)img標(biāo)簽，而不必把所有的img節(jié)點(diǎn)全部創(chuàng)建出來(lái)，要點(diǎn)是每次更換不可見(jiàn)img的src。

動(dòng)畫(huà)的實(shí)現(xiàn)

1.  首先定義一個(gè)timestap，這個(gè)值記錄每個(gè)幀移動(dòng)多少距離。定義初始step=0，記錄移動(dòng)的步數(shù)。

2.  每次移動(dòng)的距離moveWidth是timestamp*step，圖片1向右移動(dòng)增加moveWidth，圖片2從左側(cè)進(jìn)入moveWidth。因此，圖片1的transform是translate(moveWidth), 而圖片2的transform則是translate(moveWidth-圖片寬度)。

    3.  step+1

    4.  如果moveWidth>圖片寬度，步驟5，否則requestAnimationFrame請(qǐng)求下一次執(zhí)行，繼續(xù)2-4.

    5.  圖片1和2都將位置放置在起始位置，圖片2的z-index設(shè)置為最高。

這樣就完成了一次移動(dòng)的動(dòng)畫(huà)。

html代碼

<header>      <div class="box">          <img src="imgs/banner1.jpg">          <img src="imgs/banner2.jpg">          <img src="imgs/banner3.jpg">          <img src="imgs/banner4.jpg">      </div>      <div class="buttons">          <div class="active">1</div>          <div>2</div>          <div>3</div>          <div>4</div>      </div>      <div class="left">          <div class="arrow"></div>      </div>      <div class="right">          <div class="arrow"></div>      </div>  </header>

JS代碼

var timeout = null;  window.onload = function () {      var oLeft = document.querySelector('.left');      var oRight = document.querySelector('.right');      var oButton = document.querySelector('.buttons');      var oButtons = document.querySelectorAll('.buttons div');      var oImgs = document.querySelectorAll('.box img');      var imgWidth = oImgs[0].width;      var gIndex = 0;      begainAnimate();      // 綁定左右點(diǎn)擊事件      oLeft.onclick = function () {          clearTimeout(timeout);          leftMove();          begainAnimate();      };      oRight.onclick = function () {          clearTimeout(timeout);          rightMove();          begainAnimate();      };      // 綁定數(shù)字序號(hào)事件      oButton.onclick = function (event) {          clearTimeout(timeout);          var targetEl = event.target;          var nextIndex = (+targetEl.innerText) - 1;          console.log(nextIndex);          rightMove(nextIndex);          begainAnimate();      }      // 默認(rèn)初始動(dòng)畫(huà)朝右邊      function begainAnimate() {          clearTimeout(timeout);          timeout = setTimeout(function () {              rightMove();              begainAnimate();          }, 3000);      }      // 向左移動(dòng)動(dòng)畫(huà)      function leftMove() {          var nextIndex = (gIndex - 1 < 0) ? oImgs.length - 1 : gIndex - 1;          animateSteps(nextIndex, -50);      }      // 向右移動(dòng)動(dòng)畫(huà)      function rightMove(nextIndex) {          if (nextIndex == undefined) {              nextIndex = (gIndex + 1 >= oImgs.length) ? 0 : gIndex + 1;          }          animateSteps(nextIndex, 50);      }      // 一次動(dòng)畫(huà)      function animateSteps(nextIndex, timestamp) {          var currentImg = oImgs[gIndex];          var nextImg = oImgs[nextIndex];          nextImg.style.zIndex = 10;          var step = 0;          requestAnimationFrame(goStep);          // 走一幀的動(dòng)畫(huà)，移動(dòng)timestamp          function goStep() {              var moveWidth = timestamp * step++;              if (Math.abs(moveWidth) < imgWidth) {                  currentImg.style.transform = `translate(${moveWidth}px)`;                  nextImg.style.transform = `translate(${moveWidth > 0 ? (moveWidth - imgWidth) : (imgWidth + moveWidth)}px)`;                  requestAnimationFrame(goStep);              } else {                  currentImg.style.zIndex = 1;                  currentImg.style.transform = `translate(0px)`;                  nextImg.style.transform = `translate(0px)`;                  oButtons[gIndex].setAttribute('class', '');                  oButtons[nextIndex].setAttribute('class', 'active');                  gIndex = nextIndex;              }          }      }  }  window.onclose = function () {      clearTimeout(timeout);  }

css布局樣式

<style>      /* 首先設(shè)置圖片box的區(qū)域，將圖片重疊在一起  */      header {          width: 100%;          position: relative;          overflow: hidden;      }      .box {          width: 100%;          height: 300px;      }      .box img {          width: 100%;          height: 100%;          position: absolute;          transform: translateX(0);          z-index: 1;      }      .box img:first-child {          z-index: 10;      }        /* 數(shù)字序列按鈕 */      .buttons {          position: absolute;          right: 10%;          bottom: 5%;          display: flex;          z-index: 100;      }      .buttons div {          width: 30px;          height: 30px;          background-color: #aaa;          border: 1px solid #aaa;          text-align: center;          margin: 10px;          cursor: pointer;          opacity: .7;          border-radius: 15px;          line-height: 30px;      }      .buttons div.active {          background-color: white;      }      /* 左右切換按鈕 */      .left,      .right {          position: absolute;          width: 80px;          height: 80px;          background-color: #ccc;          z-index: 100;          top: 110px;          border-radius: 40px;          opacity: .5;          cursor: pointer;      }      .left {          left: 2%;      }     .right {          right: 2%;      }      .left .arrow {          width: 30px;          height: 30px;          border-left: solid 5px #666;          border-top: solid 5px #666;          transform: translate(-5px, 25px) rotate(-45deg) translate(25px, 25px);      }      .right .arrow {          width: 30px;          height: 30px;          border-left: solid 5px #666;          border-top: solid 5px #666;          transform: translate(50px, 25px) rotate(135deg) translate(25px, 25px);      }  </style>

“JS怎么用transform實(shí)現(xiàn)banner的無(wú)限滾動(dòng)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！