使用JavaScript怎么實(shí)現(xiàn)一個(gè)移動端的輪播圖效果

今天就跟大家聊聊有關(guān)使用JavaScript怎么實(shí)現(xiàn)一個(gè)移動端的輪播圖效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

移動端手勢

輪播圖分析

1、自動輪播且無縫 [定時(shí)器、過渡動畫]
2、分頁器要隨著圖片的輪播而改變 [根據(jù)索引切換]
3、滑動效果 [touch事件]
4、圖片隨著分頁器變化
5、滑動結(jié)束的時(shí)候，如果滑動的距離不超過屏幕的1/3，就恢復(fù)回去 [過渡]
6、滑動結(jié)束的時(shí)候，如果滑動的距離超過屏幕的1/3，就切換 [滑動方向 + 過渡]]

html頁面結(jié)構(gòu)

<!--輪播圖-->
  <div class="jd_banner">
   <ul class="clearfix">
    <li><a href="#" ><img src="images/l8.jpg" alt=""></a></li>
    <li><a href="#" ><img src="images/l1.jpg" alt=""></a></li>
    <li><a href="#" ><img src="images/l2.jpg" alt=""></a></li>
    <li><a href="#" ><img src="images/l3.jpg" alt=""></a></li>
    <li><a href="#" ><img src="images/l4.jpg" alt=""></a></li>
    <li><a href="#" ><img src="images/l5.jpg" alt=""></a></li>
    <li><a href="#" ><img src="images/l6.jpg" alt=""></a></li>
    <li><a href="#" ><img src="images/l7.jpg" alt=""></a></li>
    <li><a href="#" ><img src="images/l8.jpg" alt=""></a></li>
    <li><a href="#" ><img src="images/l1.jpg" alt=""></a></li>
   </ul>
   <ul class="clearfix">
    <li class="now"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
</div>

js部分

/* 動態(tài)設(shè)置過渡 */
var addTransition = function (ele) {
 ele.style.transition = "all .6s";
 ele.style.webkitTransition = "all .6s";
};
/* 移除過渡效果 */
var removeTransition = function (ele) {
 ele.style.transition = "none";
 ele.style.webkitTransition = "none";
};
/* 設(shè)置容器平移 -- 也就是滑動動畫 
 ele:當(dāng)前元素
 xwidth:平移的距離
*/
var setTranslateX = function (ele, xwidth) {
 ele.style.transform = "translateX(" + xwidth + "px)";
 ele.style.webkitTransform = "translateX(" + xwidth + "px)";
}

var banner = function () {
 /** 輪播圖分析 */
 /** 1 自動輪播且無縫 [定時(shí)器、過渡動畫]
  * 2 點(diǎn)要隨著圖片的輪播而改變 [根據(jù)索引切換]
  * 3 滑動效果 [touch事件]
  * 4 圖片隨著點(diǎn)而變化
  * 5 滑動結(jié)束的時(shí)候，如果滑動的距離不超過屏幕的1/3，就恢復(fù)回去 [過渡]
  * 6 滑動結(jié)束的時(shí)候，如果滑動的距離超過屏幕的1/3，就切換 [滑動方向 + 過渡]]
  */
 var timer = ''
 /* 封裝定時(shí)器函數(shù) */
 var startInterval = function () {
  timer = setInterval(function () {
   index++;// 基于索引 做位移
   addTransition(imgBox); // 為輪播圖片組的ul設(shè)置過渡函數(shù)
   setTranslateX(imgBox, -index * width);// 根據(jù)當(dāng)前索引值計(jì)算平移的距離
  }, 2000);
 }
 var banner = document.querySelector(".jd_banner");
 var width = banner.offsetWidth; // 屏幕的寬度
 var imgBox = banner.querySelector("ul:first-child"); // 輪播圖片ul
 var length = imgBox.querySelectorAll("li").length; // 圖片的個(gè)數(shù)
 var pointBox = banner.querySelector("ul:last-child");// 分頁器ul
 var points = pointBox.querySelectorAll("li");// 分頁器集合

 var index = 1; // 初始化索引，由于要無縫銜接，索引從1開始
 startInterval();
 
 /* transitionend事件：當(dāng)元素過渡動畫結(jié)束后執(zhí)行
 每次輪播動畫結(jié)束后，判斷當(dāng)前索引值
 */
 imgBox.addEventListener("transitionend", function () {
  if (index >= length - 1) {
   index = 1;
   // 清過渡，瞬間定位imgBox 
   removeTransition(imgBox);
   setTranslateX(imgBox, -index * width);
  }
  // 滑動的時(shí)候也需要無縫
  else if (index <= 0) {
   index = 8;
   removeTransition(imgBox);
   setTranslateX(imgBox, -index * width);
  }
  showPoint(index - 1); // 改變分頁器狀態(tài)
 });

 var showPoint = function (index) {
  for (var i = 0; i < points.length; i++) {
   points[i].className = '';
  }
  points[index].className = "now";
 };
 /* 滑動切換 (touch事件) */
 var startX = 0; // 觸摸起始點(diǎn)
 imgBox.addEventListener("touchstart", function (e) {
  // 記錄起始位置的X坐標(biāo)
  clearInterval(timer);
  startX = e.touches[0].clientX;
 });
 var distanceX = 0;
 var translateX = 0;
 // **** 加一個(gè)標(biāo)識，判斷用戶有沒有滑動
 var isMove = false
 imgBox.addEventListener("touchmove", function (e) {
  var moveX = e.touches[0].clientX;
  // 計(jì)算位移,有正負(fù)方向
  distanceX = moveX - startX;
  // 計(jì)算目標(biāo)元素的位移
  // 元素將要的定位 = 當(dāng)前定位 + 手指移動的距離
  translateX = -index * width + distanceX;
  // ********** 要想圖片實(shí)時(shí)地跟著手指走，一定要把過渡清楚掉
  removeTransition(imgBox)
  setTranslateX(imgBox, translateX);
  isMove = true;// 確定用戶有滑動
  e.preventDefault(); // 去除移動端瀏覽器默認(rèn)的滑動事件
 });

 imgBox.addEventListener("touchend", function (e) {
  if (isMove) {
   if (Math.abs(distanceX) > width / 3) {
    // 切換
    if (distanceX > 0) {
     // 上一張
     index = index - 1;
    } else {
     // 下一張
     index = index + 1;
    }
    addTransition(imgBox); // 設(shè)置過渡動畫
    setTranslateX(imgBox, -index * width);
    if (index >= 9) {
     index = 1;
    }
    if (index <= 0) {
     index = 8;
    }
    showPoint(index - 1);

   } else {
    // 不滿足滑動條件，回退到之前的狀態(tài)
    addTransition(imgBox);
    setTranslateX(imgBox, -index * width);
    showPoint(index - 1);
   }
  }
  // **** 最好做一次參數(shù)的重置
  startX = 0;
  distanceX = 0;
  isMove = false;
  // ****** 為了嚴(yán)謹(jǐn)，再清一次定時(shí)器
  clearInterval(timer)
  // 加上定時(shí)器
  startInterval();
 });
};

總結(jié)

原生js實(shí)現(xiàn)滑動切換的原理主要還是利用移動端的手勢事件

• touchstart 當(dāng)手指觸摸屏幕時(shí)觸發(fā)

• touchmove 當(dāng)手指在屏幕中滑動的時(shí)候觸發(fā)

• touchend 當(dāng)手指離開屏幕時(shí)觸發(fā)

利用touch相關(guān)事件實(shí)現(xiàn)移動端常見滑動效果和移動端常見的手勢事件。

而swiper插件的底層實(shí)現(xiàn)原理也是這個(gè)，因此，為了快速開發(fā)，還是使用swiper插件最好

看完上述內(nèi)容，你們對使用JavaScript怎么實(shí)現(xiàn)一個(gè)移動端的輪播圖效果有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。