移动端图片无缝滚动是如何实现的？（代码）-9543建站博客

广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

移动端图片无缝滚动是如何实现的？（代码）

本篇文章给大家带来的内容是关于移动端图片无缝滚动是如何实现的？（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!doctype html><html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width,user-scalable=no"><title>Document</title><script type="text/javascript">//获取htmlvar html = document.documentElement;//设置html的字体大小 = 可视区的宽度 / 15html.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><ul><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:;"></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>

登录后复制

以上就是对移动端图片无缝滚动是如何实现的？（代码）的全部介绍，如果您想了解更多有关HTML视频教程，请关注PHP中文网。

以上就是移动端图片无缝滚动是如何实现的？（代码）的详细内容，更多请关注9543建站博客其它相关文章！