<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="../css/public.css"/> <style type="text/css"> .wrap{width: 3.75rem;height:3rem;position: relative;overflow: hidden;} .list{width: 37.5rem;position: absolute;left: 0;top: 0;} .list li{width:3.75rem;height: 3rem;float: left;} img{width: 100%;height: 100%;} .pic{position: absolute;bottom: 0;width:3.75rem;left: 1rem;} .pic a{float:left;margin:0.1rem;width: 0.2rem;height: 0.2rem;background: red;} .pic a.light{background: #fff;} </style> <script type="text/javascript"> (function(){ var html=document.documentElement; html.style.fontSize=html.clientWidth/3.75+'px'; })(); document.addEventListener('touchstart',function(e){ e.preventDefault(); }) </script> </head> <body> <section class="wrap"> <ul class="list"> <li><img src="../img/hd4.jpg"/></li> <li><img src="../img/hd5.jpg"/></li> <li><img src="../img/hd6.jpg"/></li> <li><img src="../img/hd7.jpg"/></li> <li><img src="../img/hd8.jpg"/></li> <li><img src="../img/hd4.jpg"/></li> <li><img src="../img/hd5.jpg"/></li> <li><img src="../img/hd6.jpg"/></li> <li><img src="../img/hd7.jpg"/></li> <li><img src="../img/hd8.jpg"/></li> </ul> <div class="pic"> <a class="light" href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </section> <script type="text/javascript"> var wrap=document.querySelector('.wrap'); var list=document.querySelector('.list'); var pic=document.querySelectorAll('a'); var disX=0; //获取到父元素的左边距 var oList=0; var num=0; //获取容器的宽度 var len=wrap.offsetWidth; //li的个数 var listLen=list.children.length; var n=0; //给元素绑定事件 list.addEventListener('touchstart',start); list.addEventListener('touchmove',move); list.addEventListener('touchend',end); function start(ev){ var e=ev.changedTouches[0]; disX=e.pageX; oList=this.offsetLeft; list.style.transition='none'; if(num==0){ num=pic.length; oList=-num*len; } if(-num==listLen-1){ num=pic.length-1; oList=-num*len; } } function move(ev){ var e=ev.changedTouches[0]; list.style.left=e.pageX-disX+oList+'px'; } function end(){ oList=this.offsetLeft; num=Math.round(oList/len); list.style.transition='.5s'; list.style.left=num*len+'px'; //滑块的控制 pic[n%pic.length].className=''; pic[-num%pic.length].className='light'; n=-num; } </script> </body> </html>