【常见】移动端实例——图片无缝滚动

程序员文章站 2022-03-23 19:07:39

Document</t ......</div> <div class="content"> <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,user-scalable=no"> <title>document</title> <script type="text/javascript"> //获取html var html = document.documentelement; //设置html的字体大小 = 可视区的宽度 / 15 html.style.fontsize = html.clientwidth / 15 + 'px'; //阻止pc和浏览器默认行为。 document.addeventlistener('touchstart',function(ev){ ev.preventdefault(); }); </script> <style> body{ margin: 0; } .wrap{ height: 4.68rem; position: relative; } .list{ padding: 0; margin: 0; width:400%; position: absolute; top:0; left:0; list-style: none; } .list li{ float: left; width:15rem; } .list img{ width:15rem; display: block; } nav{ width:15rem; height: 10px; position: absolute; bottom:5px; z-index: 1; text-align:center; } nav a{ width:15px; height: 15px; display: inline-block; background: red; border-radius:50%; vertical-align:top; } nav a.active{ background:#fff; } </style> </head> <body> <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> <script type="text/javascript"> var wrap=document.getelementsbyclassname("wrap")[0], list=document.getelementsbyclassname("list")[0], disx=0, listl=0, n=0, w=wrap.clientwidth, s=0, timer=0; a=document.getelementsbytagname("a"); list.addeventlistener("touchstart",start); list.addeventlistener("touchmove",move); list.addeventlistener("touchend",end); list.innerhtml+=list.innerhtml; len=list.children.length; console.log(len); list.style.width=w*len+"px"; function start(ev){ clearinterval(timer); var e=ev.changedtouches[0]; disx=e.pagex; list.style.transition="none"; var num=math.round(list.offsetleft/w); list.style.left=num*w+"px"; 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"; } listl=this.offsetleft; } function move(ev){ var e=ev.changedtouches[0]; list.style.left=(e.pagex-disx)+listl+"px"; } function end(){ var num=math.round(list.offsetleft/w); console.log(num) list.style.transition="0.5s"; list.style.left=num*w+"px"; a[n].classname=""; a[(-num)%a.length].classname="active"; n=(-num)%a.length; timer=setinterval(function(){ inn(); },1000) s=-num; } timer=setinterval(function(){ inn(); },1000) function inn(){ s++; list.style.left=-s*w+"px"; list.style.transition="0.5s"; console.log(s); if(s>len-1){ s=a.length-1; list.style.transition="none"; list.style.left=-s*w+"px"; console.log(list.style.left); settimeout(function(){ list.style.transition="0.5s"; s++; list.style.left=-s*w+"px"; a[n].classname=""; a[s%a.length].classname="active"; n=s%a.length; },30) } a[n].classname=""; a[s%a.length].classname="active"; n=s%a.length; } </script> </body> </html> </div> <div class="info-pre-next"> 上一篇： <a href="/article/302138.html"> 序列化组建 </a> 下一篇： <a href="/article/302140.html"> c#在pictureBox控件上绘制多个矩形框及删除绘制的矩形框 </a> </div> <div class="wz_tuijian"> 推荐阅读 <ul> <li> <a href="/article/2257668.html" target="_blank" title="Html5移动端获奖无缝滚动动画实现示例"> <h2> Html5移动端获奖无缝滚动动画实现示例 </h2> </a> </li> <li> <a href="/article/2208527.html" target="_blank" title="Html5移动端获奖无缝滚动动画实现示例"> <h2> Html5移动端获奖无缝滚动动画实现示例 </h2> </a> </li> <li> <a href="/article/2172198.html" target="_blank" title="基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码"> <h2> 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码 </h2> </a> </li> <li> <a href="/article/1994408.html" target="_blank" title="vue移动端裁剪图片结合插件Cropper的使用实例代码"> <h2> vue移动端裁剪图片结合插件Cropper的使用实例代码 </h2> </a> </li> <li> <a href="/article/1989663.html" target="_blank" title="js 简易版滚动条实例(适用于移动端H5开发)"> <h2> js 简易版滚动条实例(适用于移动端H5开发) </h2> </a> </li> <li> <a href="/article/1916487.html" target="_blank" title="Vue.js 2.0 移动端拍照压缩图片预览及上传实例"> <h2> Vue.js 2.0 移动端拍照压缩图片预览及上传实例 </h2> </a> </li> <li> <a href="/article/1835658.html" target="_blank" title="利用Vue实现移动端图片轮播组件的方法实例"> <h2> 利用Vue实现移动端图片轮播组件的方法实例 </h2> </a> </li> <li> <a href="/article/1788370.html" target="_blank" title="js实现图片区域可点击大小随意改变(适用移动端)代码实例"> <h2> js实现图片区域可点击大小随意改变(适用移动端)代码实例 </h2> </a> </li> <li> <a href="/article/1773975.html" target="_blank" title="基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码"> <h2> 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码 </h2> </a> </li> <li> <a href="/article/1658838.html" target="_blank" title="【常见】移动端实例——图片无缝滚动"> <h2> 【常见】移动端实例——图片无缝滚动 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about">关于网站<ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </div></div></div></footer> </body> </html>