這篇文章主要介紹了如何使用純js + transition動(dòng)畫(huà)實(shí)現(xiàn)移動(dòng)端web輪播圖，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

勃利網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,勃利網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為勃利上1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的勃利做網(wǎng)站的公司定做！

核心點(diǎn):

在 我們通過(guò)代碼來(lái)移動(dòng)一段距離的時(shí)候, 使用 transion動(dòng)畫(huà);在手指移動(dòng)的時(shí)候,不使用transition動(dòng)畫(huà).

使用 transition實(shí)現(xiàn)的動(dòng)畫(huà)效果的輪播圖js代碼不足100行

~function () { 
  var lastPX = 0; // 上一次觸摸的位置x坐標(biāo), 需要計(jì)算出手指每次移動(dòng)的一點(diǎn)點(diǎn)距離 
  var movex = 0; // 記錄手指move的x方向值 
  var imgWrap = document.getElementById('imgWrap'); 
  var startX = 0; // 開(kāi)始觸摸時(shí)手指所在x坐標(biāo) 
  var endX = 0; // 觸摸結(jié)束時(shí)手指所在的x坐標(biāo)位置 
  var imgSize = imgWrap.children.length - 2; // 圖片個(gè)數(shù) 
  var t1 = 0; // 記錄開(kāi)始觸摸的時(shí)刻 
  var t2 = 0; // 記錄結(jié)束觸摸的時(shí)刻 
  var width = window.innerWidth; // 當(dāng)前窗口寬度 
  var nodeList = document.querySelectorAll('#imgWrap img'); // 所有輪播圖節(jié)點(diǎn)數(shù)組 NodeList 
 
  // 給圖片設(shè)置合適的left值, 注意 querySelectorAll返回 NodeList, 具有 forEach方法 
  nodeList.forEach(function (node, index) { 
   node.style.left = (index - 1) * width + 'px'; 
  }); 
 
  /** 
   * 移動(dòng)圖片到當(dāng)前的 tIndex索引所在位置 
   * @param {number} tIndex 要顯示的圖片的索引 
   * */ 
  function toIndex(tIndex) { 
   var dis = -(tIndex * width); 
   // 動(dòng)畫(huà)移動(dòng) 
   imgWrap.style.transform = 'translate3d(' + dis + 'px, 0, 0)'; 
   imgWrap.style.transition = 'transform .2s ease-out'; 
   movex = dis; 
   // 索引到最后一張圖片, 迅速切換索引到同一張圖的初始位置 
   setTimeout(function () { 
    if (tIndex === imgSize) { 
     imgWrap.style.transform = 'translate3d(0, 0, 0)'; 
     imgWrap.style.transition = 'none'; 
     movex = 0; 
    } 
    if (tIndex === -1) { 
     imgWrap.style.transform = 'translate3d(' + width * (1 - imgSize) + 'px, 0, 0)'; 
     imgWrap.style.transition = 'none'; 
     movex = -width * (imgSize - 1); 
    } 
   }, 200); 
 
  } 
 
  /** 
   * 處理各種觸摸事件 ,包括 touchstart, touchend, touchmove, touchcancel 
   * @param {Event} evt 回調(diào)函數(shù)中系統(tǒng)傳回的 js 事件對(duì)象 
   * */ 
  function touch(evt) { 
   var touch = evt.targetTouches[0]; 
   var tar = evt.target; 
   var index = parseInt(tar.getAttribute('data-index')); 
   if (evt.type === 'touchmove') { 
    var di = parseInt(touch.pageX - lastPX); 
    endX = touch.pageX; 
    movex += di; 
    imgWrap.style.webkitTransform = 'translate3d(' + movex + 'px, 0, 0)'; 
    imgWrap.style.transition = 'none'; // 移動(dòng)時(shí)避免動(dòng)畫(huà)延遲 
    lastPX = touch.pageX; 
   } 
   if (evt.type === 'touchend') { 
    var minus = endX - startX; 
    t2 = new Date().getTime() - t1; 
    if (Math.abs(minus) > 0) { // 有拖動(dòng)操作 
     if (Math.abs(minus) < width * 0.4 && t2 > 500) { // 拖動(dòng)距離不夠,返回! 
      toIndex(index); 
     } else { // 超過(guò)一半,看方向 
      console.log(minus); 
      if (Math.abs(minus) < 20) { 
       console.log('距離很短' + minus); 
       toIndex(index); 
       return; 
      } 
      if (minus < 0) { // endX < startX,向左滑動(dòng),是下一張 
       toIndex(index + 1) 
      } else { // endX > startX ,向右滑動(dòng), 是上一張 
       toIndex(index - 1) 
      } 
     } 
    } else { //沒(méi)有拖動(dòng)操作 
 
    } 
   } 
   if (evt.type === 'touchstart') { 
    lastPX = touch.pageX; 
    startX = lastPX; 
    endX = startX; 
    t1 = new Date().getTime(); 
   } 
   return false; 
  } 
 
  imgWrap.addEventListener('touchstart', touch, false); 
  imgWrap.addEventListener('touchmove', touch, false); 
  imgWrap.addEventListener('touchend', touch, false); 
  imgWrap.addEventListener('touchcancel', touch, false); 
 
 }();

注意事項(xiàng):

當(dāng)切換到邊界值的圖時(shí),應(yīng)該等到切換動(dòng)畫(huà)效果之后再換到相同圖內(nèi)容的位置

所以:   我們使用setTimeout延遲執(zhí)行 無(wú)限循環(huán)播放替換圖位置的操作

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用純js + transition動(dòng)畫(huà)實(shí)現(xiàn)移動(dòng)端web輪播圖”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!