触屏事件、移动端常见特效（轮播图）及常用插件

今日重点：
一、触屏事件
1、 触屏事件概述
touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。

2、触摸事件对象（TouchEvent）
TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。
touchstart、touchmove、touchend 三个事件都会各自有事件对象。
触摸事件对象重点我们看三个常见对象列表：

3、移动端拖动元素
1）touchstart、touchmove、touchend 可以实现拖动元素
2）但是拖动元素需要当前手指的坐标值 我们可以使用  targetTouches[0] 里面的pageX 和 pageY
3）移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
4）手指移动的距离:手指滑动中的位置 减去手指刚开始触摸的位置
拖动元素三步曲：
（1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置
（2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子
（3） 离开手指 touchend
注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();
二、移动端常见特效
1、案例: 移动轮播图
移动端轮播图功能和基本PC端一致。
①可以自动播放图片
②手指可以拖动播放轮播图
1）自动播放功能
（1）开启定时器
（2）移动端移动，可以使用translate 移动
（3）想要图片优雅的移动，请添加过渡效果
2）自动播放功能-无缝滚动
（1）注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断
（2）此时需要添加检测过渡完成事件  transitionend **
（3）判断条件：如果索引号等于 3 说明走到最后一张图片，此时 索引号要复原为 0
（4）此时图片，去掉过渡效果，然后移动
（5）如果索引号小于0， 说明是倒着走， 索引号等于2
（6）此时图片，去掉过渡效果，然后移动
3）小圆点跟随变化效果
（1）把ol里面li带有current类名的选出来去掉类名 remove
（2）让当前索引号的小li 加上 current   add
（3）但是，是等着过渡结束之后变化，所以这个写到 transitionend 事件里面
4）手指滑动轮播图
（1）本质就是ul跟随手指移动，简单说就是移动端拖动元素
（2）触摸元素touchstart：  获取手指初始坐标**
（3）移动手指touchmove：  计算手指的滑动距离，并且移动盒子
（4）离开手指touchend:   根据滑动的距离分不同的情况
（5）如果移动距离小于某个像素  就回弹原来位置
（6）如果移动距离大于某个像素就上一张下一张滑动。
（7）滑动也分为左滑动和右滑动判断的标准是 移动距离正负 如果是负值就是左滑 反之右滑 **
（8）如果是左滑就播放下一张 （index++）
（9）如果是右滑就播放上一张  (index--)
三、classList 属性
1）添加类：
element.classList.add（’类名’） ；
例：focus.classList.add('current');
2）移除类：
element.classList.remove（’类名’）;
例：focus.classList.remove('current');
3）切换类：
element.classList.toggle（’类名’）;
例：focus.classList.toggle('current');
注意：以上方法里面，所有类名都不带点**
四、案例：返回顶部
基本功能：
（1）当页面滚动某个地方，就显示，否则隐藏
（2）点击可以返回顶部
制作分析：
（1）滚动某个地方显示
（2）事件：scroll页面滚动事件
（3）如果被卷去的头部（window.pageYOffset ）大于某个数值
（4）点击，window.scroll(0,0) 返回顶部
五、click 延时解决方案
移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。
解决方案：
1）禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。
2）利用touch事件自己封装这个事件解决300ms 延迟。
3）使用插件。fastclick 插件解决300ms 延迟
六、移动端常用开发插件
1、什么是插件
（1）JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。
（2）特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。
2、插件的使用
（1）引入 js 插件文件。
（2）按照规定语法使用。
（3）fastclick 插件解决 300ms 延迟。 使用延时
（4）GitHub官网地址： https://github.com/ftlabs/fastclick
3、Swiper 插件的使用
中文官网地址： https://www.swiper.com.cn/
（1）引入插件相关文件。
（2）按照规定语法使用
有关缓动效果原理及网页轮播图制作 请点击a=href"https://www.cnblogs.com/kk199578/p/14152465.html"