一.轮播图
1.1 触屏事件touch
- touchstart
- touchmove
- touchend
1.2 触摸事件对象
| 触摸列表 | 说明 |
|---|---|
| touches | 正在触摸屏幕的所有手指的一个列表 |
| targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |
| changedTouches | 手指状态发生了改变的列表，从无到有，从有到无变化 |
- 当手指离开屏幕时，没有touches和targetTouches。但是有changedTouches
- targetTouches[0] 获得正在触摸dom元素的第一个手指的相关信息，比如：手指坐标targetTouches[0].pageX
- 注意：手指移动会触发滚动屏幕，所以必要时需要阻止默认的屏幕滚动： e.preventDefault();
1.3 classList 元素的类名
- 获得类名：div.classList[0]
- 添加类名：div.classList.add('类名')
- 删除类名：div.classList.remove('类名')
- 切换类名：div.classLIst.toggle('类名')
1.4 移动端轮播图思路
1. 自动播放
① 开启定时器setinterval()
（1）每隔一段时间，更改ul位置，可以使用ul.style.transform = 'translateX（）'
（2）加过渡，完成动画效果，使用ul.style.transition = 'all .3s'
②实现无缝滚动
（1）前后添加最后一张和第一张图片，设置margin-left：-100%；
（2）判断index值，需要等图片滚动完再判断，用transitionend事件
（3）修改index值、切换图片时，要去掉过渡，再移动，ul.style.transition = 'none'
（4）修改index值的时候，添加、删除li小圆点的current类。把ol里面的带有current类名的li选出来，去掉current
2. 手指触摸拖动屏幕播放
①绑定touchstart事件，获取鼠标按下的初始值
②绑定touchmove事件，计算鼠标移动距离movex，修改ul的位置，并且取消屏幕滚动默认行为e.preventDefault();
③绑定touchend事件，根据鼠标移动距离movex的值判断图片回弹还是切换图片，如果Math.abs(movex) > 50,则切换图片，否则回弹。判断完后清除定时器并重新开启定时器。
二. click延时解决方案
移动端click事件会有300ms延时，原因是移动端屏幕双击会缩放（double tap to
zoom）页面。
解决方案：
- 禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟
<meta name='viewport' content='user-scalable=no'>
- 利用touch事件自己封装一个函数解决300ms延迟
- 最终解决方案：使用fastclick插件解决
github网址：github.com/ftlabs/fast…
点击lib，复制代码，存入js文件，引入文件并引入js代码。即可使用。
三. 移动端常用开发插件
3.1 什么是插件
js插件就是js文件，一般是为了解决某个问题而专门存在，功能单一。
3.2 插件
swiper:www.swiper.com.cn/
superslide: www.superslide2.com/
iscroll: github.com/cubiq/iscro…
3.3 插件的使用总结
1.确认功能
2.下载插件
3.打开demo文件，查看需要引入的相关文件，并且引入
4.复制demo实例文件中的结构html，样式css以及js代码
四. 框架
顾名思义就是一套架构，他会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。
常用框架：bootstrap、vue、angular、react。技能开发pc端也能开发移动端
