第1步:在head部分设置meta,设置html字体大小,以及阻止pc和浏览器默认行为
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no"> <title>Document</title> <script> //获取html var html = document.documentElement; //设置html的字体大小 = 可视区的宽度 / 15 html.style.fontSize = html.clientWidth / 15 + 'px'; //阻止pc和浏览器默认行为。 document.addEventListener('touchstart',function(ev){ ev.preventDefault(); }, {passive: false}); </script>
第2步:设置布局
<section class="wrap"> <ul class="list"> <li> <img src="img/img.jpg" alt="" /> </li> <li> <img src="img/img2.jpg" alt="" /> </li> <li> <img src="img/img3.jpg" alt="" /> </li> <li> <img src="img/img4.jpg" alt="" /> </li> </ul> <nav> <a href="javascript:;" class="active"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </nav> </section>
第3步:设置css
<style> body{ margin: 0; } .wrap{ height: 4.68rem; position: relative; } .list{ padding: 0; margin: 0; 400%; position: absolute; top:0; left:0; list-style: none; } .list li{ float: left; 15rem; } .list img{ 15rem; display: block; } nav{ 15rem; height: 10px; position: absolute; bottom:5px; z-index: 1; text-align:center; } nav a{ 15px; height: 15px; display: inline-block; background: red; border-radius:50%; vertical-align:top; } nav a.active{ background:#fff; } </style>
第四步:js部分
var wrap = document.querySelector('.wrap'), list = document.querySelector('.list'), a = document.querySelectorAll('a'), divX = 0, // 按下的坐标 listL = 0, // 当前按下list的left值 w = wrap.clientWidth, // 一张图片的宽度 len = 0, // 个数 n = 0; // 默认第一个小点为白色 // 两组图片,当点击第一组的第一张时,迅速切换到第二组的第一张 // 实现无缝无限滚动 list.innerHTML += list.innerHTML; len = list.children.length; list.style.width = w * len + 'px'; list.addEventListener('touchstart', start); list.addEventListener('touchmove', move); list.addEventListener('touchend', end); // 按下时 function start(ev) { list.style.transition = 'none'; var e = ev.changedTouches[0]; disX = e.pageX; /* * 在按下的时候,要知道当前点击的是第几张图片 * 如果是第一张,快速拉到第5张的位置上 */ var num = Math.round(list.offsetLeft / w); if(num === 0){ num = a.length; list.style.left = -num * w + 'px'; } if(-num === len-1){ num = a.length - 1; list.style.left = -num * w + 'px'; } // 做完相应处理后,将当前的offsetLeft赋值给listL listL = this.offsetLeft; } // 移动 function move(ev){ var e = ev.changedTouches[0]; list.style.left = e.pageX - disX + listL + 'px'; } // 抬起 function end(ev){ // 四舍五入 var num = Math.round(list.offsetLeft / w); list.style.transition = '.5s'; // 当前的宽度 = 张数 * 每一张的宽度 list.style.left = num * w + 'px'; // 清空上一个n的class a[n].className = ''; // 给当前图片对应的小点设置class a[-num % a.length].className = 'active'; // 将n设置为当前图片的num n = -num % a.length; }
所用的四张图片如下:
·