.imgSwrap{
width: 100%;
overflow: hidden;
}
.imgUl{
width: 400%;
transform: translateX(0px);
}
.imgUl li{
width: 25%;
float: left;
}
.imgUl li img{
width: 100%;
}
.imgUl:after{
display: block;
content: '';
clear: both;
}
<div class="imgSwrap">
<ul class="imgUl">
<li class="imgLi"><img src="images/shangxian.jpg" alt=""></li>
<li class="imgLi"><img src="images/shunfeng.jpg" alt=""></li>
<li class="imgLi"><img src="images/ww.jpg" alt=""></li>
<li class="imgLi" style=""><img src="images/shangxian.jpg" alt=""></li>
</ul>
</div>
(function(){
var slide={};
slide.index=0;
slide.touchSlide=function(){
var ulImg=document.getElementsByClassName('imgUl')[0];
var imgLi=document.getElementsByClassName('imgLi');
var startX;
var moveX;
var moveLength;
var positionX=0;
ulImg.addEventListener('touchstart',function(e){
touch=e.touches[0];
startX=touch.pageX;
//console.log(X);
});
ulImg.addEventListener('touchmove',function(e){
ulImg.style.transition='';
touch=e.touches[0];
moveX=touch.pageX;
//console.log(endX);
moveLength=Math.abs(moveX-startX);
if((moveX-startX)<0){//往右;
moveLength=-moveLength;
}
if((moveX-startX)>0){//往左;
//moveLength=moveLength;
}
console.log(ulImg.style.transform);
//console.log('translateX滑动前的距离'+positionX);
positionX=(positionX+moveLength);
ulImg.style.transform='translateX('+positionX+'px)';
//console.log(startX+' '+moveX+' '+ moveLength+' ' +positionX);
console.log('开始位置'+startX+' 结束位置'+moveX+' 滑动距离'+moveLength+' translateX滑动后距离'+positionX);
});
ulImg.addEventListener('touchend',function(e){
var width=parseInt($('.imgUl li').css('width'));
touch=e.touches[0];
var endX=e.pageX;
var percent=Math.abs(moveLength/width);
if(percent>0.3){
if((moveX-startX)<0){
slide.index=slide.index-1;
if(slide.index<-imgLi.length-1){
slide.index=-imgLi.length-1;
}
console.log(slide.index);
}else{
slide.index=slide.index+1;
if(slide.index>0){
slide.index=0;
}
console.log(slide.index);
}
positionX=(width*slide.index);
}else{
positionX=width*slide.index;
}
if(positionX>0){
positionX=0
}
if(positionX<-parseInt(width)*(imgLi.length-1)){
positionX=-width*(imgLi.length-1);
}
ulImg.style.transition=0.8+'s';
ulImg.style.transform='translateX('+positionX+'px)';
});
window.onresize=function(){
//alert(13);
var width=parseInt($('.imgUl li').css('width'));
positionX=width*slide.index;
ulImg.style.transform='translateX('+positionX+'px)';
}
}
/*slide.timer=function(){
setInterval(function(){
slide.index=slide.index-1;
console.log(slide.index);
},1000);
}*/
slide.infin=function(){
this.touchSlide();
//this.timer();
}
slide.infin();
})();
我觉得你计算滑动距离的方式有点小问题,一般的做法是计算是touchstart时触点的横竖坐标,然后touchend时计算出横竖坐标,通过end和start的坐标可以计算出滑动的角度,使用三角函数的tan来计算角度,如果角度大于某个值,比如15°那么我们认为它是向右滑动,以此类推。
另外你使用的是事件代理方式来做的,那么会出现这样的一个问题:有可能你在滑动的过程中的动作会触发多次的touchstart -》touchmove -》touchend 这些循环,特别是滑动很快的时候,滑动慢就不会出现这种问题,所以需要滑动很长距离才能有效也是由于这种情况造成的。
个人意见,仅作参考。希望对你有帮助。