在js中如何实现移动端手指滑动轮播图
程序员文章站
2022-05-21 18:14:37
...
下面我就为大家分享一篇js原生实现移动端手指滑动轮播图效果的示例,具有很好的参考价值,希望对大家有所帮助。
如下所示:
<!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>
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
以上就是在js中如何实现移动端手指滑动轮播图的详细内容,更多请关注其它相关文章!
上一篇: Node.js非对称加密方法的实现
下一篇: iScroll插件实现内容滚动案例详解