Hammer.js+轮播原理实现简洁的滑屏功能

下面是关于“Hammer.js+轮播原理实现简洁的滑屏功能”的完整攻略，主要包括以下内容：

1. Hammer.js是什么及其使用
2. 轮播原理及实现
3. 基于Hammer.js的滑屏操作
4. 示例说明

1. Hammer.js是什么及其使用

Hammer.js是一款轻量级的JS插件，可以帮助我们更加轻松地实现触屏操作，比如拖拽、缩放、旋转等。Hammer.js具有以下几个特点：

• 支持浏览器、Node.js、微信小程序等平台；
• 支持多点触控；
• 支持多平台的输入方式，例如触摸、鼠标和指针。

在使用前需要将其引入项目中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

2. 轮播原理及实现

轮播通过设置容器的宽度以及子元素的浮动实现。我们可以通过设置一个定时器来控制内部容器的移动，实现轮播的效果。代码如下：

<div class="container">
  <div classs="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

.container {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.wrapper {
  width: 300%;
  transition: all .3s ease-in-out;
}
.item {
  width: 33.33%;
  height: 200px;
  float: left;
}

let index = 0;
let timer = setInterval(function() {
  index++;
  if (index >= 3) {
    index = 0;
  }
  const distance = -index * 100;
  $('.wrapper').css({
    '-webkit-transform': `translate3d(${distance}%, 0, 0)`,
    '-moz-transform': `translate3d(${distance}%, 0, 0)`,
    '-ms-transform': `translate3d(${distance}%, 0, 0)`,
    '-o-transform': `translate3d(${distance}%, 0, 0)`,
    'transform': `translate3d(${distance}%, 0, 0)`
  });
}, 3000);

上述代码中，通过设置.wrapper的宽度为所有子元素的宽度之和，通过设置float为left使得子元素可以排列在同一行内。为达到轮播的效果，我们通过定时器不断地改变.wrapper的transform属性，让子元素移动到指定位置上，实现轮播的效果。

3.基于Hammer.js的滑屏操作

Hammer.js的使用非常简单，我们只需要通过new Hammer(element)来创建一个Hammer对象。并可以通过其提供的各种方法来实现不同的操作，比如panstart、panmove、panend等。下面我们以实现左右滑动轮播为例：

<div class="container">
  <div classs="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

.container {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.wrapper {
  width: 300%;
  transition: all .3s ease-in-out;
}
.item {
  width: 33.33%;
  height: 200px;
  float: left;
}

const element = document.querySelector('.wrapper');
const hammertime = new Hammer(element);

let index = 0;
hammertime.on('panstart', () => {
  clearInterval(timer);
});

hammertime.on('panmove', (e) => {
  let distance = index * -100 + (e.deltaX / window.innerWidth) * -100;
  $('.wrapper').css({
    '-webkit-transform': `translate3d(${distance}%, 0, 0)`,
    '-moz-transform': `translate3d(${distance}%, 0, 0)`,
    '-ms-transform': `translate3d(${distance}%, 0, 0)`,
    '-o-transform': `translate3d(${distance}%, 0, 0)`,
    'transform': `translate3d(${distance}%, 0, 0)`
  });
});

hammertime.on('panend', (e) => {
  let distance = e.deltaX;
  if (distance < 0 && index <= 1) {
    index++;
  } else if (distance > 0 && index >= 1) {
    index--;
  }
  distance = -index * 100;
  $('.wrapper').css({
    '-webkit-transform': `translate3d(${distance}%, 0, 0)`,
    '-moz-transform': `translate3d(${distance}%, 0, 0)`,
    '-ms-transform': `translate3d(${distance}%, 0, 0)`,
    '-o-transform': `translate3d(${distance}%, 0, 0)`,
    'transform': `translate3d(${distance}%, 0, 0)`
  });

  timer = setInterval(function() {
    index++;
    if (index >= 3) {
      index = 0;
    }
    const distance = -index * 100;
    $('.wrapper').css({
      '-webkit-transform': `translate3d(${distance}%, 0, 0)`,
      '-moz-transform': `translate3d(${distance}%, 0, 0)`,
      '-ms-transform': `translate3d(${distance}%, 0, 0)`,
      '-o-transform': `translate3d(${distance}%, 0, 0)`,
      'transform': `translate3d(${distance}%, 0, 0)`
    });
  }, 3000);
});

在代码中，我们利用panstart、panmove、panend等事件，监听手势的开始、移动、结束等操作。实现对于手势滑动的响应。在panstart事件中，我们清除之前设定的定时器；在panmove事件中，我们可以通过计算deltaX的值，来控制轮播的移动距离；在panend事件中，我们通过判断手指滑动的距离，来控制轮播的索引位置，并重新开启定时器。

4. 示例说明

为了更好地理解轮播实现和Hammer.js的使用，我们提供了两个简单的示例：

1. 基础版 示例

这个demo中，我们采用了setInterval实现基础的自动轮播，并通过动态设置.wrapper的transform属性实现轮播的效果。在基础版的代码中，你可以看到最简单粗暴的实现方法。

1. 手势版 示例

在这个demo中，我们结合了Hammer.js来实现手势滑屏的效果，在panstart、panmove、panend等事件中，通过接收Hammer.js返回的参数来实现对页面的滑动操作。同时，我们利用了定时器来控制轮播。