移动端--轮播图
tap事件
1、
① tapstart 当开始滑动的时候滑动
② tapmove 当在元素中滑动的时候触发
③ tapend 当滑动结束的时候触发
事件对象中touches保存了当前手指触摸屏幕的信息，是个列表； e.touches[0].clientX
原理：根据位移的正负判断是左滑还是右滑。
注意：在touchend的事件对象中没有client 属性，所以需要在touchmove中记录。
var startX =0 ;
var moveX =0 ;
var distance =0 ;//误触范围
container.addEventListener('touchstart',function(){
//开始滑动时记录位置
startX = e.touches[0].clientX;
})
container.addEventListener('touchmove',function(){
moveX = e.touches[0].clientX;
})
container.addEventListener('touchend',function(){
var distanceX = moveX-startX ;
distance = Math.abs(moveX-startX);
if(distanceX > 0){
if(distance>30)
//向右滑动
}else{
//向左滑动
}
})
轮播图需求分析
1、获取元素
2、计算并设置元素ul的宽度
3、给元素添加滑动事件
4、判断左滑还是右滑
5、更新点的状态
6、自动轮播效果
代码：1、
var banner =document.querySelector('.banner');
var ul = banner.querySelector('ul');
var bannerLi =ul.querySelectorAll('li');
var spanList = banner.querySelectorAll('.points span');
var iWidth = document.documentElement.clientWidth;//屏幕宽度
2、
//设置ul的宽度
ul.style.width = iWidth * bannerLi.length+'px';
//设置li的宽度
for(var i=0;i<bannerLi.length;i++){
bannerLi[i].width = iWidth + 'px';
}
3、
//手指开始触摸的位置
var startX =0,moveX =0，disX=0;
var index =0 ;//当前索引值
banner.addEventListener('touchstart',function(e){
clearInterval(timer);
start = e.touches[0].clientX;
})
banner.addEventListener('touchmove',function(e){
moveX = e.touches[0].clientX;
disX = Math.abs(moveX-startX);
})
banner.addEventListener('touchend',function(e){
//重新启动定时器
if(moveX-startX>0){
//向右滑动
if(disX>30){
index -- ;
if(index < 0){
index = 0 ;
}
ul.style.transition="all 0.4s";
ul.style.transform = 'translateX('+ (-index*iWidth) +'px)';
}
}else{
if(disX>30){
index ++ ;
//如果当前的滚动索引大于的最后一张图片
if(index > ul.length -1){
index = ul.length -1 ;
}
ul.style.transition="all 0.4s";
//调节滚动距离
ul.style.transform = 'translateX('+ (-index*iWidth) +'px)';
}
}
//更新选中状态
if(distX > 30) {
//5、先清空所有的，在设置当前的
for(var i=0;i<pointList.length;i++){
pointList[i].classList.remove('active');
}
pointList[index].classList.add('active');
}
//6、定时轮播
var timer = setInterval(function(){
index++;
if(index>ul.length-1){
index = 0;
}
ul.style.transition="all 0.4s";
//调节滚动距离
ul.style.transform = 'translateX('+ (-index*iWidth) +'px)';
//5、先清空所有的，在设置当前的
for(var i=0;i<pointList.length;i++){
pointList[i].classList.remove('active');
}
pointList[index].classList.add('active');
},1000)
})
