js原生實現移動端手指滑動輪播圖效果
阿新 • • 發佈：2019-01-23
<!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>