移动端手机banner swiper的效果

swiper4的效果

还不知道swiper4重大改变的请按这里swiper官网
swiper4变化最大的应该就是实现了像安卓的ViewPage相似的效果，发现好多网站都在用例如：饿了么、美丽说等，给用户的体验真的很好。最坑的是天猫居然没有用上，还只是单纯的判断手势方向让图片进行切换（可以天猫为了兼容性着想吧，这些就要问天猫的大佬门了）(⊙ˍ⊙)。

我唯一好奇的是它是怎么实现的，然后去下了它的源码看了一下，用到了css3的transform属性，不断改变x轴的位置，其实我在想用定位不断改变left的值应该也是可以实现的，不过会少了一些流畅，有兴趣的可以试试用left去模拟一下。

transition-duration: 0ms; transform: translate3d(-640px, 0px, 0px);

效果如下：

Untitled1.png

html的代码

<div class="swiper-container">
    <div id="swiper-wrapper" class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
  </div>

然后js的实现如下：

let $swiper = $("#swiper-wrapper");
    let pageX = 0;
    let relX = 0;
    let relX1 = 0;
    let startX = 0;
    let startY = 0;
    let endX = 0;
    let endY = 0;
    let distanceX = 0;
    let distanceY = 0;
    let len = $swiper.children().length;
    for (let i = 0; i < len; i++) {
      // console.log($swiper.children()[i].offsetLeft)
      $swiper.children()[i].setAttribute("swiper-left", $swiper.children()[i].offsetLeft);
      $swiper.children()[i].addEventListener("touchstart", function (event) {
        pageX = event.targetTouches[0].pageX;
        startX = event.targetTouches[0].pageX;
        startY = event.targetTouches[0].pageY;

      })
      $swiper.children()[i].addEventListener("touchmove", function (event) {
        endX = event.targetTouches[0].pageX;
        endY = event.targetTouches[0].pageY;
        //获取滑动距离
        distanceX = endX - startX;
        distanceY = endY - startY;
        //判断滑动方向
        if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {
          relX1 = -Math.abs(event.targetTouches[0].pageX - pageX);
        } else if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < 0) {
          relX1 = Math.abs(event.targetTouches[0].pageX - pageX);
          console.log('往左滑动');
        } else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
          console.log('往上滑动');
        } else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {
          console.log('往下滑动');
        } else {
          console.log('点击未滑动');
        }

        $swiper.css({ "transition-duration": "0ms", "transform": "translate3d(" + (-(relX + relX1)) + "px, 0px, 0px)" });
      })

      $swiper.children()[i].addEventListener("touchend", function (event) {
        relX = relX1 + relX;
        if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {
          for (var i = 0; i < len; i++) {
            if (relX - $swiper.children()[i].offsetWidth < $swiper.children()[i].getAttribute("swiper-left")) {
              $swiper.css({ "transform": "translate3d(" + (-($swiper.children()[i].getAttribute("swiper-left"))) + "px, 0px, 0px)" });
              relX = parseFloat($swiper.children()[i].getAttribute("swiper-left"));
              break;
            }
          }
        } else if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < 0) {
          for (var i = 0; i < len; i++) {
            if (relX < $swiper.children()[i].getAttribute("swiper-left")) {
              $swiper.css({ "transform": "translate3d(" + (-($swiper.children()[i].getAttribute("swiper-left"))) + "px, 0px, 0px)" });
              relX = parseFloat($swiper.children()[i].getAttribute("swiper-left"));
              break;
            }
          }
          if (relX > $swiper.children()[len - 1].getAttribute("swiper-left")) {
            $swiper.css({ "transform": "translate3d(" + (-($swiper.children()[len - 1].getAttribute("swiper-left"))) + "px, 0px, 0px)" });
            relX = parseFloat($swiper.children()[len - 1].getAttribute("swiper-left"));
          }
        } else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
          if (relX > $swiper.children()[len - 1].getAttribute("swiper-left")) {
            $swiper.css({ "transform": "translate3d(" + (-($swiper.children()[len - 1].getAttribute("swiper-left"))) + "px, 0px, 0px)" });
            relX = parseFloat($swiper.children()[len - 1].getAttribute("swiper-left"));
          }
          console.log('往上滑动');
        } else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {
          if (relX > $swiper.children()[len - 1].getAttribute("swiper-left")) {
            $swiper.css({ "transform": "translate3d(" + (-($swiper.children()[len - 1].getAttribute("swiper-left"))) + "px, 0px, 0px)" });
            relX = parseFloat($swiper.children()[len - 1].getAttribute("swiper-left"));
          }
          console.log('往下滑动');
        } else {
          console.log('点击未滑动');
        }
      })
    }

可能写得不够好，主要就是监听touchstart、touchmove、touchend这三个事件，然后把事件的位置判断好就行了。有空真的要好好像那些大佬们好好学习，他们怎么想出这么多好玩的东西❤❤❤