如下所示：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>document</title> </head> <style> html{height:100%;} body{width: 100%;height:100%;margin:0;overflow: hidden;} .wrap{position: relative;overflow: hidden;} .box{position: absolute;list-style: none;left:0;top:0;padding:0;margin:0;} .box li{float:left;} .box{ position: relative; height: 2000px; width: 100%; top: 0; bottom: 0; left: 0; right: 0; background: red; } .box1{ height: 2000px; } .box2{ background: yellow; } .box3{ background: yellowgreen; } .box4{ background: orange; } .box5{ background: cyan; } </style> <body> <p class="wrap"> <ul class="box"> <li><p class="box1 box2">11111</p></li> <li><p class="box1 box3">2222</p></li> <li><p class="box1 box4">3333</p></li> <li><p class="box1 box5">4444</p></li> </ul> </p> <script> var ali = document.queryselectorall(.box li); var box = document.queryselector('.box'); var wrap = document.queryselector('.wrap'); var aliwidth = box.offsetwidth; console.log('aliwidth: ' + aliwidth) wrap.style.height = ali[0].offsetheight + 'px'; // 设置盒子的宽度 box.style.width = ali.length*100 + '%'; for(var i=0;i<ali.length;i++){ ali[i].style.width = 1/ali.length * 100 + '%'; }; // 初始化手指坐标点 var startpoint = 0; var startele = 0; //手指按下 wrap.addeventlistener("touchstart",function(e){ startpoint = e.changedtouches[0].pagex; startele = box.offsetleft; }); //手指滑动 wrap.addeventlistener("touchmove",function(e){ var currpoint = e.changedtouches[0].pagex; var disx = currpoint - startpoint; var left = startele + disx; box.style.left = left + 'px'; }); //当手指抬起的时候，判断图片滚动离左右的距离，当 wrap.addeventlistener("touchend",function(e){ var left = box.offsetleft; // 判断正在滚动的图片距离左右图片的远近，以及是否为最后一张或者第一张 var currnum = math.round(-left/aliwidth); currnum = currnum>=(ali.length-1) ? ali.length-1 : currnum; currnum = currnum<=0 ? 0 : currnum; box.style.left = -currnum*wrap.offsetwidth + 'px'; }) </script> </body> </html>
相关推荐：
jquery版轮播图效果和extend扩展实例分享
关于jquery和html+css实现带小圆点和左右按钮的轮播图分享
实例详解jquery实现左右轮播图效果
以上就是js实现移动端手指滑动轮播图效果的详细内容。