<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> <title></title> <style> *{margin: 0;padding: 0;} ul{list-style: none;} a{text-decoration: none;} html,body{height: 100%;overflow: hidden;} img{display: block;} #wrap{position: relative;} #wrap .list{ position: absolute; top: 0; left: 0; overflow: hidden; /*width: 500%;*/ } #wrap .list li{ float: left; } #wrap .list li a img{ width: 100%; } #wrap .nav{ position: absolute; left: 0; bottom: 7px; width: 100%; height: 10px; text-align: center; line-height: 10px; } #wrap .nav span{ display: inline-block; width: 10px; height: 10px; background: gray; border-radius: 50%; vertical-align: middle; } #wrap .nav .active{ background-color: rgba(255,0,0,0.8); } </style> </head> <body> <div id="wrap"> <ul class="list"> <li><a href="javascript:;"><img src="img/1.jpg" alt="" /></a></li> <li><a href="javascript:;"><img src="img/2.jpg" alt="" /></a></li> <li><a href="javascript:;"><img src="img/3.jpg" alt="" /></a></li> <li><a href="javascript:;"><img src="img/4.jpg" alt="" /></a></li> <li><a href="javascript:;"><img src="img/5.jpg" alt="" /></a></li> </ul> <div class="nav"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </body> <script> //禁止鼠标的默认事件 document.addEventListener("touchstart",function(event){ event.preventDefault() }); //加载完毕后执行以下的代码 window.onload=function(){ //获取元素 var wrap=document.getElementById("wrap"); var list=document.querySelector("#wrap .list"); var liNodes=document.querySelectorAll("#wrap .list li"); var spanNodes=document.querySelectorAll("#wrap .nav span"); //布局的处理 var style=document.createElement("style"); style.innerHTML="#wrap{height: "+liNodes[0].offsetHeight +"px}"; style.innerHTML+="#wrap .list{width: "+liNodes.length +"00%}"; style.innerHTML+="#wrap .list li{width: "+100/liNodes.length+"%}"; document.head.appendChild(style); //滑动 //定义元素的初始位置 var elemX=0; //定义手指的初始位置 var startX=0; //定义鼠标距离差 var dic=0; wrap.addEventListener("touchstart",function(event){ var touch=event.changedTouches[0]; //获取元素的初始位置 elemX = list.offsetLeft; //获取手指的初始位置 startX = touch.clientX; }) wrap.addEventListener("touchmove",function(event){ var touch=event.changedTouches[0]; //获取手指的结束位置 var endX=touch.clientX; //确定鼠标距离差 dic=endX - startX; var left = elemX + dic; //确定手指最终的位置 list.style.left = left + "px"; }); //滑动 wrap.addEventListener("touchend",function(event){ var touch=event.changedTouches[0]; var now=0; var left=list.offsetLeft; // //以下 now=Math.round(-left/document.documentElement.clientWidth) // 也可以用以下代码代替,这样限定值就可以不必只为0.5 // now=-left/document.documentElement.clientWidth; // var num=now-Math.floor(now); // if(dic<0){ // if(num>0.5){ // now=Math.ceil(now); // }else if(num<0.5){ // now=Math.floor(now); // } // }else if(dic>0){ // if(num<0.5){ // now=Math.floor(now); // }else if(num>0.5){ // now=Math.ceil(now); // } // } now=Math.round(-left/document.documentElement.clientWidth); //限定now的范围 if(now<0){ now=0 }else if(now>liNodes.length-1){ now=liNodes.length-1 } list.style.left = -now * document.documentElement.clientWidth + "px"; //添加滑动小圆点的特效,当图片滚动到指定位置时,小圆点处于这个位置,给目标圆点添加class for(var i=0;i<liNodes.length;i++){ spanNodes[i].className=""; } spanNodes[now].className="active"; }) } </script> </html>
移动端-轮播图
猜你喜欢
转载自blog.csdn.net/xzz2222/article/details/80199003
今日推荐
周排行