多行触屏滑动轮播
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" /> <title>多行轮播</title> <style> a{-webkit-tap-highlight-color: transparent;} *{margin: 0;padding: 0;} body{background: green;text-align: center} #wrap{overflow: hidden;margin: 0.1rem auto;width: 6.4rem;} #list{list-style: none;width: 100rem;overflow: hidden;font-size: 0;position: relative;left: 0;} #list li{float: left; width: 3.1rem;margin-right: 0.2rem;} #list li>div{margin-bottom: 0.2rem;} #list img{max-width: 100%;} #go-left,#go-right{ width: 0.4rem;height: 1.3rem;position: absolute; background-repeat: no-repeat; background-size: 100%; top:1.5rem; } #go-left{ background-image: url(http://img.37wan.cn/huodong/qgjmh-yhjy-20170407/images/wap-l.png); left: 0.1rem; } #go-right{ background-image: url(http://img.37wan.cn/huodong/qgjmh-yhjy-20170407/images/wap-r.png); right: 0.1rem; } </style> </head> <body> <div id="wrap"> <ul id="list"> <li class="active"> <div><img src="img/m1.jpg" /></div> <div><img src="img/m2.png" /></div> </li> <li> <div><img src="img/m3.jpg" /></div> <div><img src="img/m4.png" /></div> </li> <li> <div><img src="img/m5.png" /></div> </li> </ul> </div> <a href="javascript:void(0)" id="go-left"></a> <a href="javascript:void(0)" id="go-right"></a> <script type="text/javascript" src="http://image.37wan.cn/common/js/jquery-1.9.1.min.js"></script> <script> function rePosition(){ var width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth; var ratio=width/750; if(width<=750){ document.getElementsByTagName('html')[0].style.fontSize=100*ratio+"px"; }else{ document.getElementsByTagName('html')[0].style.fontSize="100px"; } } rePosition(); window.onresize = function () { rePosition(); }; function goStep(d) { var liNum = $("#list li").length; var liAct = $("#list>li.active").index(); var canr = (liNum - liAct) > 2; var canl = liAct > 0; if (d === "r") { if (canr) { changeLeft("r"); $("#list>li.active").removeClass("active").next().addClass("active"); } } else if (d === "l") { if (canl) { changeLeft("l"); $("#list>li.active").removeClass("active").prev().addClass("active"); } } } var $ul=$("#list"); var lidistant=parseFloat($ul.find("li:first").width())+parseFloat($ul.find("li:first").css("margin-right")); var thisOffset=$ul.css("left"); function changeLeft(d){ if(d==="l"){ thisOffset=$ul.css("left"); $ul.animate({"left":lidistant+parseFloat(thisOffset)},"fast"); }else if(d==="r"){ thisOffset=$ul.css("left"); $ul.animate({"left":parseFloat(thisOffset)-lidistant},"fast"); } } $("#go-left").on("click",function(){ goStep("l"); }); $("#go-right").on("click",function(){ goStep("r"); }); var startX,endX=0; document.getElementById("wrap").addEventListener('touchstart',function(evt){ var touch = evt.touches[0]; //获取第一个触点 startX = Number(touch.pageX); //页面触点X坐标 }); document.getElementById("wrap").addEventListener('touchmove',function(evt){ evt.preventDefault(); var touch = evt.touches[0]; //获取第一个触点 endX = Number(touch.pageX); //页面触点X坐标 }); document.getElementById("wrap").addEventListener('touchend',function(evt){ if(endX-startX>90){ goStep("l") }else if(endX-startX<-90){ goStep("r") } }); </script> </body> </html>
该功能尚未封装成为插件
