如下所示：
<!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><div class="wrap"> <ul class="box"> <li><div class="box1 box2">11111</div></li> <li><div class="box1 box3">2222</div></li> <li><div class="box1 box4">3333</div></li> <li><div class="box1 box5">4444</div></li> </ul></div><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>以上這篇js原生實現移動端手指滑動輪播圖效果的示例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
