开发者学堂课程【移动 Web 前端开发：js 功能-滑动效果】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8421
js功能-滑动效果
基本内容
一、轮播图的位置
二、touch 事件的另一种情况
一、轮播图的位置
Touch 事件可以滑动 ( touch 事件 监听触摸点坐标改变距离 位移) *
var startX = 0 ; 此时在记录开始的X坐标。
imageBox.addEventListener(‘touchstart' , function(e){
});
监听的目的是什么？ 答：记录开始的位置
在做滑动的时候，比如说： 从一个点滑动到另一个点， 必须要记录首次触摸屏幕的位置， 在滑动的过程中，不断地以当前的位置和之前的位置作比较， 可以比较出移动的距离和位置。
startX = e.touches[ 0 ].clientX;
console.log(startX);
判断方向是根据第一个点判断,其他可以忽略。 当前记录的是X轴的坐标。
imageBox.addEventListener(‘touchmove' , function(e){
var moveX = e.touches[ 0 ].clientX;
console.log(moveX);
console.log(moveX-startX); 随着两个点之间距离的改变,会不停的在打印两个点在移动时产生的距离
此时可以监听的不停滑动的时候的坐标
});
imageBox.addEventListener(‘touchend' ,function(e){
});
l 第一个点固定不动，另一个点来回的做法可以根据点的坐标轴解决；还有一种情况是负的，一个点固定不动，往左边全部都是正的，但是往右边滑动都是负的。
二、touch 事件的另一种情况
var startX = 0 ; 此时在记录开始的X坐标。
imageBox.addEventListener(‘touchstart' , function(e){
});
监听的目的是什么？ 答：记录开始的位置
在做滑动的时候，比如说： 从一个点滑动到另一个点， 必须要记录首次触摸屏幕的位置， 在滑动的过程中，不断地以当前的位置和之前的位置作比较， 可以比较出移动的距离和位置。
清除定时器。
clearInterval（timer ）
startX = e.touches[ 0 ].clientX;
console.log(startX);
判断方向是根据第一个点判断,其他可以忽略。 当前记录的是 X 轴的坐标。
imageBox.addEventListener(‘touchmove' , function(e){
var moveX = e.touches[ 0 ].clientX ;
var distanceX = moveX – startX ；
distanceX 大于 0 的时候，向右滑动。
distanceX 小于 0 的时候，向左滑动。
此时可以监听的不停滑动的时候的坐标
var translateX = -index*width +distance ；
计算出了将要定位的位置 ；
清除过渡；
removetranslation ( );
做定位；
setTranslateX （translateX）；
此时就可以达到向左或向右滑动时页面悬停的效果，如下图所示：
});
imageBox.addEventListener(‘touchend' ,function(e){
});
l 作用：滑动
模拟理解1: 向左边滑动 distanceX 是负的
假设现在的位置在这，这个位置应该是假设屏幕的宽度如果是640，那么现在的 distanceX 应该是多少？是-640。假设屏幕是640，移动了一个屏幕的距离，而且是往左移动。那么就是-640。
假设现在开始向左移动，初始点在“1”位置，现在定位，如下图所示：
假设移动了一半320，-640+（-320）= -960，移动之后如图所示：
l 模拟理解2: 向右边滑动 distanceX 是正的
向右滑动一半 +320。+320 +（-640）=-320
l 结论： 将要去做定位的位置，和distanceX的正负方向无关，基于当前的位置去移动。
l 在做滑动之前， 必须要清除定时器。
