html代码如下：
4
543
Document
1
2
3
4
js代码如下：
function touchSlide(objectClassName,aImgClassName,zoom){
var op=document.getElementsByClassName(objectClassName)[0];
var endX;//滑动结束时的X轴坐标
var startX;//滑动开始时deX轴坐标
var scroll;//滑动滚出去的距离
var index=0;//当前显示的第几个p;从0开始计算;
var aImg=document.getElementsByClassName(aImgClassName);
var imgLength=aImg.length;
var aImgWidth=aImg[0].offsetWidth*(imgLength-1);
var imgWidth=aImg[0].offsetWidth;
op.addEventListener("touchstart",function(e){
var touch=e.touches[0];
startX=touch.pageX;
});
op.addEventListener("touchmove",function(e){
var touch=e.touches[0];
var moveLeft=op.offsetLeft;//滑动时的当前Left的距离;
endX=touch.pageX;
scroll=endX-startX;
//console.log(scroll);
op.style.left=moveLeft+scroll+'px';
});
op.addEventListener("touchend",function(e){
var endLeft=op.offsetLeft;
if(endLeft>0){
op.style.left=0+'px';
}else if(endLeft<-aImgWidth){
op.style.left=-aImgWidth+'px';
}else{
var scrollPercent=Math.abs(scroll)/imgWidth;
if(scrollPercent>zoom){
if(scroll<0){//往左滑动
index++;
index=index>(imgLength-1)? index-1: index;
op.style.left=-imgWidth*index+'px';
}else if(scroll>0){//往右滑动
index--;
index=index<0? 0: index;
op.style.left=-imgWidth*index+'px';
}
}else{
op.style.left=-imgWidth*index+'px';
}
}
});
}
touchSlide('pSwrap','img',0.2);
请各位提个好点的建议！如果可以顺便提个好点的思路。我觉得哈，这里最关键的就是如何判断当前滑动的是第几张，要往哪滑，以实现序号的增减，我的思路方法已经有了，但是感觉代码写的不完美，特别是在手机上运行的时候感觉不大好~
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
移动浏览器上要加上下面的meta标签，才能让像素对齐
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
将touchmove和touchend的监听放到touchstart时候才绑定
在touchend时将touchmove和touchend解绑
你的逻辑有问题，在touchmove的时候，不是减去刚触摸的坐标
应该在触摸移动一次就要更新开始的坐标
function touchSlide(objectClassName,aImgClassName,zoom){
}
touchSlide('pSwrap','img',0.2);
这样了，感觉还是不行 meta也加了
html和body宽度建议用js获取。。。加上meta viewport后手机上宽度一般没有500px那么宽
还有建议用translate3d 硬件加速性能好些。
可以使用开源的iSlider，效果很好～