触屏事件
触屏事件概述
移动端浏览器兼容性较好，我们不需要考虑js的兼容性问题，可以放心使用原生js书写效果。移动端有自己独特的地方，比如触屏touch（触摸事件），Android和ios都有。touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可以响应用户手指对屏幕或者触控板的操作。
常见的触屏touch事件
touchstart 手指触摸到一个dom元素时触发
touchmove 手指在一个dom元素上滑动时触发
touchend 手指从一个dom元素上移开时触发
触摸事件对象（TouchEvent)
TouchEvent是一个描述手指在触摸平面的状态变化的事件，这类事件用于描述一个或者多个触摸点，使开发者可以检测到触点的移动，触点的增加和减少
touchstart, touchmove, touchend三个事件都有各自的事件对象
三个常见对象：
touches 正在触摸屏幕的所有手指的一个列表
targetTouches 正在触摸当前DOM元素上的手指的一个列表
changedTouches 手指状态发生了改变的列表，从无到有，从有到无变化
<script>
//1 获取元素
oDiv = document.querySelector('div')
//手指触摸dom元素事件
oDiv.addeventlistener('touchstart', function (e) {
console.log('触摸开始', e)
console.log(e.targetTouches[0])
})
//手指在dom元素上移动事件
oDiv.addeventlistener('touchmove', function () {
console.log('我移动了')
})
//手指离开dom元素事件
oDiv.addeventlistener('touchend', function (e) {
console.log('离开了',e)
//当我们手指离开屏幕的时候，就没有了touches和targetTouches，但是会有changedTouches
})
</script>
移动端拖动元素
touchstart, touchmove, touchend可以实现拖动元素
但是拖动元素需要当前手指的坐标值，我们可以使用targetTouches[0]里面的pageX和pageY
移动端拖动的原理：手指移动中，计算出手指移动的距离，然后用盒子原来的位置再加上手指移动的距离
手指移动的距离：手指滑动中的位置 减去 手指刚开始触摸的位置
拖动元素三步骤：
- 触摸元素touchstart，获取手指初始坐标，同时获得盒子原来的位置
- 移动手指touchmove，计算手指滑动的距离，并且移动盒子
- 离开手指touchend
注意：手指移动也会触发滚动屏幕，所有要阻止默认的屏幕滚动 e.preventDefault()
<script>
var oDiv = document.querySelector('div')
var startX = 0; //手指的初始坐标
var startY = 0;
var x = 0;
var y = 0; //定义盒子原来的位置
oDiv.addEventListener('touchstart', function (e) {
//获取手指初始坐标，同时获得盒子原来的位置
startX = e.targetTouches[0].pageX
startY = e.targetTouches[0].pageY
x = this.offsetLeft;
y = this.offsetTop;
})
oDiv.addEventListener('touchmove', function (e) {
//计算手指的滑动距离，手指移动后的坐标减去手指初始的坐标
var moveX = e.targetTouches[0].pageX - startX
var moveY = e.targetTouches[0].pageX - startY
//移动盒子的位置 盒子原来的位置+手指滑动的距离
this.style.left = x + moveX + 'px'
this.style.top = y + moveY + 'px'
//阻止屏幕滚动的默认行为
e.preventDefault()
})
</script>
移动端的轮播图
/*
1 自动播放功能
2 开启定时器
3 移动端移动 使用translate移动
4 想要图片优雅的移动，添加过渡效果
*/
//获取元素
var focus = document.querySelector('.focus')
var ulEle = focus.children[0]
//获取focus的宽度
var w = focus, offsetWidth
console.log(w, 'w')
//利用定时器自动轮播图片
var index = 0;
var timer = setInterval(function () {
index++
var translatex = -index * w
ulEle.style.transform = 'all .3s'
ulEle.style.transform = 'translateX(' + translatex + 'px'
}, 2000)
/*
1 自动播放功能 无缝滚动
我们判断要等到图片滚动完毕再去判断，就是过渡完成后判断
此时需要添加检测过渡完成事件 transitionend
判断条件：如果索引号等于3 说明使最后一张图片，此时索引号要复原0 此时图片去掉过渡效果，然后移动
如果索引号小于0 说明是倒着走
此时图片，去掉过渡效果，然后移动
*/
ulEle.addEventListener('transitionend', function () {
if (index == 3) {
index = 0
//去掉过渡效果让我们的ulEle快速地跳到目标位置，然后移动
ulEle.style.transition = 'none'
// 利用最新的索引号乘以宽度 移动图片
ulEle.style.transform = 'translateX(' + translatex + 'px'
} else if (index < 0) {
index = 2
ulEle.style.transform = 'translateX(' + translatex + 'px)'
}
})
classList属性
classList属性是HTML5新增的一个属性，返回元素的类名，但是ie10以上版本支持
该属性用于在元素中添加，移除以及切换css类
注意：以下方法里面所有类名都不带点
添加类
element.classList.add('类名')
移除类
element.classList.remove('类名')
切换类
element.classList.toggle('类名')
手机端banner
/*
1 自动播放功能
2 开启定时器
3 移动端移动 使用translate移动
4 想要图片优雅的移动，添加过渡效果
*/
//获取元素
var focus = document.querySelector('.focus')
var ulEle = focus.children[0]
var olEle = focus.children[1]
//获取focus的宽度
var w = focus, offsetWidth
console.log(w, 'w')
//利用定时器自动轮播图片
var index = 0;
var timer = setInterval(function () {
index++
var translatex = -index * w
ulEle.style.transform = 'all .3s'
ulEle.style.transform = 'translateX(' + translatex + 'px'
}, 2000)
/*
1 自动播放功能 无缝滚动
我们判断要等到图片滚动完毕再去判断，就是过渡完成后判断
此时需要添加检测过渡完成事件 transitionend
判断条件：如果索引号等于3 说明使最后一张图片，此时索引号要复原0 此时图片去掉过渡效果，然后移动
如果索引号小于0 说明是倒着走
此时图片，去掉过渡效果，然后移动
*/
ulEle.addEventListener('transitionend', function () {
if (index >= 4) {
index = 0
//去掉过渡效果让我们的ulEle快速地跳到目标位置，然后移动
ulEle.style.transition = 'none'
// 利用最新的索引号乘以宽度 移动图片
ulEle.style.transform = 'translateX(' + translatex + 'px'
} else if (index < 0) {
index = 2
ulEle.style.transform = 'translateX(' + translatex + 'px)'
/*
小圆点跟随变化效果
把ol里面带有current类名选出来，去掉类名
让当前索引号的小li加上current
过渡结束以后变化，小圆点的变化要写在transitionend事件里面
*/
}
olEle.querySelector('.current').classList.remove('current')
olEle.children[index].classList.add('current')
})
/*
手指滑动轮播图
本质就是ul跟随手指移动，就是移动端拖动元素
触摸元素 touchstart 获取手指初始坐标
移动手指 touchmove 计算手指的滑动距离 并且移动盒子
离开手指 touchend 根据滑动距离分不同情况
如果移动距离小于某个像素 就回弹原来的位置
如果移动距离大于某个像素 就上一张下一张滑动
滑动分左滑动和右滑动，判断标准是移动距离正负 负值就是左滑 反之就是右滑
左滑就播放下一张 index++
右滑就播放上一张 index--
*/
// 获取手指初始坐标
var startX = 0
var moveX = 0
ulEle.addEventListener('touchstart', function (e) {
startX = e.targetTouches[0].pageX
//停止定时器
clearInterval(timer)
})
//移动手指 touchmove 计算手指的滑动距离 移动盒子
ulEle.addEventListener('touchmove', function () {
moveX = e.targetTouches[0].pageX - startX
//移动盒子 盒子原来的位置+手指移动的距离
var translateX = -index * w + moveX
//手指拖动时，动画效果要取消 过渡
ulEle.style.transition = 'none'
ulEle.style.transform = 'translateX(' + translatex + 'px)'
e.preventDefault() //阻止滚动屏幕的行为
})
//手指离开，根据移动距离，去判断时回弹还是播放上一张 下一张
ulEle.addEventListener('touchend', function (e) {
if (Math.abs(moveX) > 50) {
// 如果是右滑 就是播放上一张 moveX是正值
if (moveX > 0) {
index--
} else {
// 左滑就是播放下一张 mooveX是正值
index++
}
} else {
//移动距离小于50px我们就回弹
var translatex = -index * w
ulEle.style.transition = 'all .3s'
ulEle.style.transform = 'translateX(' + translatex + 'px)'
}
//手指离开时 重新开启定时器
clearInterval(timer)
timer == setInterval(function () {
index++
var translatex = -index * w
ulEle.style.transform = 'all .3s'
ulEle.style.transform = 'translateX(' + translatex + 'px'
}, 2000)
})