移动端-无缝滑屏-2

设置滑屏事件

/* 滑屏相关 */
let touchStartX = 0,
  touchdis = 0;
/* 滑动的元素的起始位置 */
let ulX = 0;
/* 图片的下标 */
let imgIndex = 0;
/* 添加移动端事件 */
[...carouselWrap].forEach((item) => {
  item.addEventListener("touchstart", function (e) {
    let touch = e.changedTouches[0]; /* TouchList 接口代表一个触摸平面上所有触点的列表。例如，如果一个用户用三根手指接触屏幕（或者触控板），与之对应的 TouchList 会包含每根手指的 Touch 对象，总共三个 */
    touchStartX = touch.clientX;
    ulX = ul.offsetLeft;
  });
  item.addEventListener("touchmove", function (e) {
    let touch = e.changedTouches[0];
    touchdis = touch.clientX - touchStartX;
    ul.style.left = ulX + touchdis + "px";
  });
  item.addEventListener("touchend", function (e) {
    if (touchdis > 0) {
      /* 向右划 */
      imgIndex--;
    } else {
      /* 向左划 */

      if (Math.abs(touchdis) >= document.documentElement.clientWidth / 2) {
        /* 移动距离大于视口的一半 */
        imgIndex++;
        ul.style.left =
          -imgIndex * document.documentElement.clientWidth +
          "px"; /* 每次移动一个视口的宽度 */
      } else {
        ul.style.left = ulX + "px";
      }
    }
  });
});

将imgIndex抽象成图片的索引，发现判断左滑右划不方便，决定升级index，抽象成ul的实时位置

/* 滑屏相关 */
   let touchStartX = 0,touchdis = 0;
   /* 滑动的元素的起始位置 */
   let ulX = 0;
   /* 图片的下标 */
   /* let imgIndex = 0; */
   /* 添加移动端事件 */
   [...carouselWrap].forEach(item=>{
     item.addEventListener('touchstart',function(e){ 
       let touch = e.changedTouches[0];/* TouchList 接口代表一个触摸平面上所有触点的列表。例如，如果一个用户用三根手指接触屏幕（或者触控板），与之对应的 TouchList 会包含每根手指的 Touch 对象，总共三个 */
       touchStartX = touch.clientX;
       ulX = ul.offsetLeft;
     });
     item.addEventListener('touchmove',function(e){ 
       let touch = e.changedTouches[0];
       touchdis = touch.clientX - touchStartX;
       ul.style.left =ulX+touchdis+'px';
      });
     item.addEventListener('touchend',function(e){
     /* 修改位置 */
       let index = ul.offsetLeft/document.documentElement.clientWidth;/* 用ul的实时位置抽象成下标，若index的下标为负：向左滑，为正：向右滑 */
       index=Math.round(index)
       if(index>0){
         /* 往右划 */
         ul.style.left = index*(document.documentElement.clientWidth)+'px';console.log(index);

       }
       else{
         /* 向左划 */
         if(Math.abs(touchdis)>=document.documentElement.clientWidth/2){ /* 移动距离大于视口的一半 */
            ul.style.left = index*(document.documentElement.clientWidth)+'px';console.log(index);/* 每次移动一个视口的宽度  Math.round(index):四舍五入返回整数*/
         }
         else{
           ul.style.left =ulX+'px';
         }
            
       }
     });
   })   

设置无限轮播的效果（思想）

赏

谢谢你请我吃糖果