文章目录
触摸事件touch
绑定事件
obj.addEventListener('touchstart',function(){
});
/*
touchstart(手指触摸屏幕时触发)
touchmove(手指在屏幕滑动时)
touchend(手指离开屏幕时)
touchcancel(被迫终止滑动时，如来电，弹消息)
*/
事件对象
touchList//触摸点（和屏幕接触点的）的集合
changedTouches // 改变后的触摸点集合(每个事件都会记录)
targetTouches //当前元素的触发点集合(离开屏幕时不会记录触摸点)
touches //页面上所有触发点集合（同上）
e.touches[0] //第一个触摸点
clientX、pageX、screenX的区别
clientX //基于浏览器窗口（视口）
pageX //基于页面（视口）
screenX //基于屏幕
box.addEventListener('touchstart',function (e) {
console.log("start");
console.log(e);
console.log(e.touches[0].clientX+"---->"+e.touches[0].clientY);
console.log(e.touches[0].pageX+"--->"+e.touches[0].pageY);
console.log(e.touches[0].screenX+"--->"+e.touches[0].screenY);
})
移动端的手势事件（swipe,swipeLeft,swipeRight,swipeUp,swipeDown）
<script>
window.onload=function () {
//理解移动端的手势事件
//swipe swipeLeft swipeRight swipeUp swipeDown
//左滑和右滑手势怎么实现
var bindSwipeEvent=function (dom,leftCallback,rightCallback) {
//手势的条件
//1、必须滑动过
//2、滑动的距离50px
var isMove=false;
var startX=0;
var distanceX=0;
dom.addEventListener('touchstart',function (e) {
startX=e.touches[0].clientX;
});
dom.addEventListener('touchmove',function (e) {
isMove=true;
var moveX=e.touches[0].clientX;
distanceX=moveX-startX;
});
dom.addEventListener('touchend',function (e) {
//滑动结束
if(isMove && Math.abs(distanceX)>50){
if(distanceX>0){
rightCallback&&rightCallback.call(this,e);
}else{
leftCallback&& leftCallback.call(this,e);
}
}
});
};
bindSwipeEvent(document.getElementsByTagName('div')[0],function (e) {
console.log(this);
console.log('左滑手势');
},function (e) {
console.log(this);
console.log('右滑手势');
});
};
</script>
轮播图
需求分析
1、自动轮播且无缝（轮播8张图，ul:first-child中共10张图） 定时器，过渡transition
2、滑动效果 利用touch事件完成
3、滑动结束的时候滑动距离distanceX不超过屏幕的1/3——吸附回去 过渡
4、滑动距离超过屏幕的1/3——切换（上一张index--，下一张index++） 根据滑动的方向(distanceX>0 正)
准备工作
//轮播图
var banner=document.querySelector('.banner');
//屏幕宽度
var width=banner.offsetWidth;
//图片容器
var imageBox=banner.querySelector('ul:first-child');
//点容器
var pointBox=banner.querySelector('ul:last-child');
//所有的点
var points=pointBox.querySelectorAll('li');
//加过渡
var addTransition=function () {
imageBox.style.transition='all 0.2s';
imageBox.style.webkitTransition='all 0.2s';
};
//清过渡
var removeTransition=function () {
imageBox.style.transition='none';
imageBox.style.webkitTransition='none';
};
//做位移
var setTranslateX=function (translateX) {
imageBox.style.transform='translateX('+translateX+'px)';
imageBox.style.webkitTransform='translateX('+translateX+'px)';
};
自动无缝轮播
var index=1;//当前显示第二张图
var timer=setInterval(function () {
index++;
//加过渡
addTransition();
//做位移
setTranslateX(-index*width);
},1000);
//实现无缝
imageBox.addEventListener('transitionend',function () {
//自动滚动的无缝
if(index>=9){
index=1;
//瞬间定位
//清过渡
removeTransition();
setTranslateX(-index*width);
}
//滑动的无缝——向右
else if(index<=0){
index=8;
removeTransition();
setTranslateX(-index*width);
}
/*根据索引设置点*/
setPoint();
});
//设置点
var setPoint=function () {
//清除样式
for(var i=0;i<points.length;i++){
var obj=points[i];
obj.classList.remove('now');
}
//给对应点加上样式
points[index-1].classList.add('now');
};
touchstart(起始点startX)
var startX=0;
var distanceX=0;
var isMove=false;
imageBox.addEventListener('touchstart',function (e) {
//清除定时器
clearInterval(timer);
//记录起始位置的X坐标
startX=e.touches[0].clientX;
});
touchmove(计算位移distanceX—>imageBox移动距离-index*width+distanceX)
imageBox.addEventListener('touchmove',function (e) {
//记录滑动过程的x坐标
var moveX=e.touches[0].clientX;
//计算位移，有正负方向
distanceX=moveX-startX;
//计算目标元素的位移 不用管正负
//元素将要的定位=当前定位+手指移动的距离
var translateX=-index*width+distanceX;
//滑动-->元素随着手指的滑动做位置的改变
//清过渡
removeTransition();
setTranslateX(translateX);
isMove=true;
});
touchend(比较手指滑动距离Math.abs(distanceX)和width/3—>做吸附|切换)
imageBox.addEventListener('touchend',function (e) {
//要使用移动的距离
if(isMove){
if(Math.abs(distanceX)<width/3){
//吸附
addTransition();
setTranslateX(-index*width);
}
else{
//切换
//左滑动 下一张
if(distanceX<0)
index++;
//右滑动 上一张
if(distanceX>0)
index--;
addTransition();
setTranslateX(-index*width);
}
}
//重置 防止污染第二次滑动
startX=0;
distanceX=0;
isMove=false;
clearInterval(timer);
//恢复自动轮播
timer=setInterval(function () {
index++;
//加过渡
addTransition();
//做位移
setTranslateX(-index*width);
},1000);
});
注意事项
1、兼容（webkit）
2、index的临界值
3、清除定时器、设置定时器
4、重置变量
5、优化（isMove）