移动端网页特效移动端轮播图

触屏事件

移动端浏览器兼容性较好，无需考虑JS兼容问题，但是移动端也有自己独特之处，比如触屏事件touch （也称触摸事件）Android和IOS都有

touch对象代表一个触摸点 ，触屏事件可响应用户手指（或触控笔）对屏幕或触控板操作

 触摸事件对象（TouchEvent）

TouchEvent描述手指在触摸平面的状态变化的事件，用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少

移动端轮播图

移动端轮播图功能和PC端基本一致

1. 可以自动播放图片
2. 手指可以拖动播放轮播图

功能实现

一、自动播放功能

1. 开启定时器
2. 移动端移动，使用translate
3. 要想图片优雅的移动，添加过渡

二、无缝滚动

1. 我们判断条件要等到图片滚动完再去判断，就是过渡完之后
2. 此时需要添加检测过渡完成事件 transitionend
3. 判断条件：如果索引号等于最后一张图片，此时索引号复原为0
4. 此时图片去掉过渡效果，然后移动
5. 如果索引号小于0，说明是倒着走，索引号为最后一张图片
6. 此时图片去掉过渡然后移动

三、小圆点跟随变化效果

1. 把 ol 里面 li 带有current类名的选出来去掉类名 remove
2. 让当前索引号的小 li 加上current add
3. 但是 ， 是等过渡结束之后变化 ， 所有这个写到 transitionend 事件里面

四、手指滑动轮播图

1. 本质就是 ul 跟随手指移动 ， 就是移动端拖动元素
2. 触摸元素 touchstart：获取手指初始坐标
3. 移动手指 touchmove： 计算手指移动距离 ， 并且移动盒子
4. 离开手指 touchend：根据滑动的距离分不同的情况
5. 如果移动距离小于某个像素，就回弹原来位置
6. 如果移动距离大于某个像素，就上一张下一张滑动

五、返回顶部

1. 当页面滚动到某个部位就显示，否则隐藏
2. 点击可以返回顶部
3. 事件：scroll 页面滚动事件
4. 如果被卷去的头部（window . pageYOffset）大于某个数值
5. 点击window . scroll(0,0) 返回顶部

classList属性

是H5新增的一个属性，返回元素的类名 ie10以上支持，可以在元素中添加，移除，切换CSS类

添加类：

element . classList . add（‘类名’）      （在后面追加类，不会覆盖前面的类名，注意前面无需加.）

移除类：

element . classList . remove（‘移除类名’）

切换类：

element . classList . toggle（‘类名’）

click延时解决方案

移动端click事件会有 300ms 的延时 ， 原因是移动端屏幕双击会缩放页面

• 禁用缩放功能

• 利用touch事件自己封装这个事件解决300s延迟

1.  原理：当手指触摸屏幕 ， 记录当前触摸时间
2. 手指离开屏幕 ， 用离开时间减去触摸时间
3. 如果时间小于150ms 并且没有滑动过屏幕 ， 那就定义为点击

•  使用插件

本地存储

特性：

1. 数据存储在用户浏览器中
2. 设置、读取方便、页面刷新不丢失数据
3. 容量大
4. 只能存储字符串 ， 可将对象JSON . stringify（）编码后存储

window.sessionStorage

1. 生命周期为关闭浏览器窗口
2. 在同一个窗口下数据可以共享
3. 以键值对的形式存储

存储数据：

sessionStorage.setltem(key,value)

获取数据

sessionStorage.getItem(key)

删除数据

sessionStorage.removeItem（key）

删除所以数据

sessionStorage.clear（）

window.localStorage

1. 生命周期永久有效 ， 除非手动删除
2. 可以多窗口共享
3. 以键值对的形式存储

存储数据

localStorage.setitem(key,value)

获取数据

localStorage.getItem（key）

删除数据

localStorge.removeItem（key）

删除所有数据

localStorage.clear（）