h5手机滑动事件
slideDom.addEventListener('touchstart', touchstart, false);
slideDom.addEventListener('touchmove', touchmove, false);
slideDom.addEventListener('touchend', touchend, false);
//开始滑动
function touchstart(e){
var point = getPoint(e);
window.startX = point.pageX;
console.log(window.startX);
};
//滑动过程中
function touchmove(e){
e.preventDefault();//阻止默认行为
var point = getPoint(e);
window.moveX = point.pageX;
window.deltaX = window.moveX - window.startX;
domove(window.deltaX+window.prevX);
};
//结束滑动
function touchend(e){
var x = Math.abs(window.deltaX);
var item_w = document.getElementById("demo1").offsetWidth;
if(window.deltaX>0){
if(x>item_w){
var indexd = Math.round(x / item_w);
index = index - indexd;
}else{
if(x/item_w > 0.3){
index--
}
}
}else if(window.deltaX<0){
if(x>item_w){
var indexd = Math.round(x / item_w);
index = index + indexd;
}else{
if(x/item_w > 0.3){
index++;
}
}
}
if(index >= (length-1)){
index = length-1;
}
if(index <0 ){
index = 0;
}
window.prevX = -index*item_w;
domove(window.prevX,true);
};
//默认以第一个手指的位置计算
function getPoint(e) {
return e.touches ? e.touches[0] : e;
};
//利用transform移动
function domove(x,t){
if(t){
slideDom.setAttribute('style', 'transform: translate(' + x + 'px, 0px);transition:transform 300ms ease');
}else{
slideDom.setAttribute('style', 'transform: translate(' + x + 'px, 0px);transition:transform 0ms ease');
}
};