web API 移动端 轮播图 手指移动 拖动图片

拖动后的位置=原先图片的位置+手指拖动的距离moveX

移动端拖动元素

1. touchstart、touchmove、touchend 可以实现拖动元素

2. 但是拖动元素需要当前手指的坐标值 我们可以使用  targetTouches[0] 里面的pageX 和 pageY

3. 移动端拖动的原理：    手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离

4. 手指移动的距离：  手指滑动中的位置 减去  手指刚开始触摸的位置

拖动元素三步曲：

（1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置

（2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子

（3） 离开手指 touchend:

注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();

//4.手指移动带动  拖动图片
  //拖动后的位置=原先图片的位置+手指拖动的距离
  var moveX = 0; //手指移动的距离
  var startX = 0; //标记开始时 手指在页面中的位置
  ul.addEventListener('touchstart', function (e) {
    startX = e.targetTouches[0].pageX;
    clearInterval(timer);
  });

  ul.addEventListener('touchmove', function (e) {
    flag = true;
    moveX = e.targetTouches[0].pageX - startX;
    //拖动后的位置=原先图片的位置+手指拖动的距离
    var translateX = -num * focusWidth + moveX;
    ul.style.transition = 'none'; //时间为0秒
    ul.style.transform = `translateX(${translateX}px)`;
  });

  //假设手指移动大于50  认为更新一张  否则  留着原地
  ul.addEventListener('touchend', function (e) {
    if (flag) {
      flag = false;
      if (Math.abs(moveX) > 50) {
        if (moveX > 0) {
          //从左侧往右移动  ===》
          num--; //如果移动的距离50以上就显示上一张图片
        } else {
          num++; //从右侧往左边移动《===   移动的距离-50就显示下一张图片
        }
        var translateX = -num * focusWidth;
        ul.style.transition = 'all .3s';
        ul.style.transform = `translateX(${translateX}px)`;
      } else {
        //如果移动的距离小于50px就图片固定不动
        var translateX = -num * focusWidth;
        ul.style.transition = 'all .1s';
        ul.style.transform = `translateX(${translateX}px)`;
      }
    }

    clearInterval(timer);
    timer = setInterval(function () {
      //在css里面已经设置了margin-left：-100%
      //所以ul界面显示的是图片focus1
      num++;
      // focus3:num为-1  focus1:num为0  focus2:num为1 .。。。。
      var translateX = -num * focusWidth;
      ul.style.transition = 'all 0.3s';
      ul.style.transform = `translateX(${translateX}px)`;
    }, 2000);
  });