开发者学堂课程【移动 Web 前端开发：Js 功能-理解滑动手势事件】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8425
Js 功能-理解滑动手势事件
内容介绍
一、滑动效果分析
二、滑动逻辑
三、代码设置
一、滑动效果分析
1、滑动效果是如何实现的
2、理解手势事件
从当前轮播图看，可以理解到移动端常见的滑动是如何实现的，也就是 tap 事件加上位移。
依靠 touch 相关事件，根据触摸位置的改变，改变对应元素的位移 translate。
二、滑动逻辑
1.无缝滚动&无缝滑动（定时器过渡位移)
2.点盒子对应改变(改变当前样式)
3.可以滑动( touch 事件监听触摸点坐标改变距离位移)
4.当滑动距离不够的时候吸附回去（过渡位移)
5.当滑动距离够了的时候，跳转上一张下一张(判断方向过渡位移)
三、代码设置
1、滑动效果是如何实现的：
/*滑动*/
/*基于当前的位置*/
/*计算将要去做定位*/
var translate X = -index*width +distance X;
/*清除过渡*/
remove Transition();
/*做定位*/
set Translate x(translate x);
2、理解手势事件：
中心点往右滑动超过50，可以理解成向右滑，中心点往左滑超过50，可以理解成向左滑；中心点往上滑超过50，可以理解成向上滑，同上，中心点往下滑超过50，可以理解成向下滑。
<! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width，user-scalable=no，initial-scale=1.0，maximum-scale=1.0,
（1）title 理解手势事件
</title>
<style>
body{
margin: o;
padding: o;
}
div{
width: 100%;
height: 200px;
background: red;
}
</style></ head><body>
<div></div><script>
Window .onload = function() {
var dom = document .query selector( 'div');
/绑定事件组/
（2）手势事件的条件：
/必须滑动过/
/滑动的距离超过50px/
(3)衍生出左滑和右滑手势事件
var start x = o;
var distance x = 0
var is Move = false;
dom .add Event Listener( 'touch s tant ' ,function(e){
star tx = e. touches[o].clientx;
});
dom. Add Event Listener( 'touch moxe ' ,function(e){
var move x = e .touches[o].client x;
dis tance x = move x – start x;
is Move = true;
});
dom. Add Event Listener( "touch end" ,function(e){
if( is Move && Math .abs (dis tancex) >= 50){
if(dis tancex >O){
console.log('右滑事件')
}
else{
console. log('左滑事件')
}
(重置参数，因为移动一点是不算滑动的)
Start x = o;
Distance x = 0
Is Move = false
