下面我就为大家分享一篇原生js实现移动端触摸轮播的示例代码，具有很好的参考价值，希望对大家有所帮助。
pc端上实现图片轮播效果很简单，只要通过使用click事件就可以非常简单的实现效果，但是在移动端上，就要通过核心的touch事件来实现。
下面是移动端手指滑动轮播图的完整代码。
<!doctype html> <html><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"><style>*{margin:0;padding:0;}li{list-style:none;}.lb{width:320px;height:130px;position:relative;margin:20px auto;overflow: hidden;}.lb .lb_img{width:2240px;height:130px;position:absolute;left:-320px;}.lb .lb_img img{width:320px;height:130px;float:left;display:block;}.lb ul{width:35px;height:4px;position:absolute;bottom:10px;left:50%;margin-left:-15px;}.lb ul li{width:4px;height:4px;border-radius:2px;border:0.25px solid #fff;margin-left:2.5px;background:#666;float:left;cursor:pointer;}.lb ul .active{background:#fff;}.lb ul li:hover{background:#fff;}</style></head><body><p class="lb"> <p class="lb_img"> <img src="img/4.jpg"> <img src="img/0.jpg"> <img src="img/1.jpg"> <img src="img/2.jpg"> <img src="img/3.jpg"> <img src="img/4.jpg"> <img src="img/0.jpg"> </p> <ul> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul></p> <script>var lb = document.queryselector(".lb");var lb_img = document.queryselector(".lb .lb_img");var img = document.queryselectorall(".lb .lb_img img")var lis = document.queryselectorall(".lb ul li");var i=2; // 初始化手指坐标点 var startpoint = 0; var startele = 0; //手指按下 lb.addeventlistener("touchstart",function(e){ startpoint = e.changedtouches[0].pagex; startele = lb_img.offsetleft; clearinterval(time) }); //手指滑动 lb.addeventlistener("touchmove",function(e){ var currpoint = e.changedtouches[0].pagex; var disx = currpoint - startpoint; var left = startele + disx; lb_img.style.left = left + "px"; }); //当手指抬起的时候， lb.addeventlistener("touchend",function(e){ var currpoint = e.changedtouches[0].pagex; var disx = - (currpoint - startpoint); var left = startele + disx; if(disx > 150){ i++; for(var q=0;q<lis.length;q++){ lis[q].classname = ''; } if(i == 7){ i=2; } lis[i-2].classname= "active" ; lb_img.style.left = -320*(math.round(disx/320)+i+1)+ 'px'; }else{ lb_img.style.left = -320*(i-1) + "px"; } if(disx < -150){ i--; for(var q=0;q<lis.length;q++){ lis[q].classname = ''; } if(i == 1){ i=6; } lis[i-2].classname= "active" ; lb_img.style.left = -320*(math.round(-disx/320)+i-2) + 'px'; }else{ lb_img.style.left = -320*(i-1) + "px"; } time=setinterval(autoplay,2000); })//设置定时器time=setinterval(autoplay,2000); function autoplay(){ i++; for(var q=0;q<lis.length;q++){ lis[q].classname = ''; } if(i == 7){ i=2; } lis[i-2].classname= "active" ; for(var a=0; a<320;a++){ settimeout(function(){ var left = lb_img.style.left ? lb_img.style.left : "-320px"; left = parseint(left)-1; if(left<-1920){ left=-321; } lb_img.style.left = left + "px"; },a); } }</script></body></html>
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在angular中如何实现查询天气预报
在angular中如何实现显示输入内容
在angular中如何实现日程表功能
在nodejs+express中如何实现文件上传
在vue+springboot中如何实现博客管理平台
在nodejs中如何解决超出最大的调用栈错误
在vue中有关于异步组件的示例
以上就是在js中如何实现移动端触摸轮播的详细内容。