js如何实现无缝滚动图
导读：本文共2024字符，通常情况下阅读需要7分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 效果图：代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><styletype="text/css">*{margin:0;padding:0;}li{list... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。效果图：
代码如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><styletype="text/css">*{margin:0;padding:0;}li{list-style:none;}.box{width:800px;height:450px;margin:50pxauto;overflow:hidden;position:relative;}.boxspan{width:40px;height:60px;display:block;position:absolute;top:225px;margin-top:-20px;cursor:pointer;z-index:1;}.box#left{background:url('http://cdn.attach.qdfuns.com/notes/pics/201701/14/042311cbd7gbjd7sggkd2b.png')no-repeat;left:0;display:none;}.box#right{background:url('http://cdn.attach.qdfuns.com/notes/pics/201701/14/042241w8z4hx4m4pjhyjzs.png')no-repeat;right:0;display:none;}#ad{width:4000px;height:450px;position:absolute;}#adli{float:left;}</style><scripttype="text/javascript">window.onload=function(){varad=document.getElementById("ad");varlef=document.getElementById("left");varrig=document.getElementById("right");vartimer=null;//管理定时器varaspect=true;functionanimate(obj,speed){//关闭上一个定时器clearInterval(obj.timer);//管理定时器obj.timer=setInterval(autoAd,30);functionautoAd(){//判断左走或者右走if(speed>0){aspect=true;if(obj.offsetLeft>=0){obj.style.left=-3200+'px';}}else{aspect=false;if(obj.offsetLeft<=-3200){obj.style.left=0;}}//匀速动画：盒子当前的位置+步长obj.style.left=obj.offsetLeft+speed+"px";}}animate(ad,-5);//鼠标划入显示控制按钮并关闭ad.parentNode.onmouseover=function(){clearInterval(ad.timer);lef.style.display="block";rig.style.display="block";};//鼠标离开隐藏控制按钮并启动定时器ad.parentNode.onmouseout=function(){clearInterval(ad.timer);clearInterval(timer);lef.style.display="none";rig.style.display="none";if(aspect){animate(ad,5);}else{animate(ad,-5);}};ad.onclick=function(event){//关闭自动轮播定时器clearInterval(ad.timer);clearInterval(timer);varevent=event||window.event;if(event.target){vartarget=-parseInt(event.target.alt)*800;}else{vartarget=-parseInt(event.srcElement.alt)*800;}timer=setInterval(function(){varstep=(target-ad.offsetLeft)/10;step=step>0?Math.ceil(step):Math.floor(step);ad.style.left=ad.offsetLeft+step+"px";if(ad.offsetLeft%800==0){clearInterval(timer);}},20)}//右移动lef.onclick=function(){clearInterval(timer);animate(ad,5);};//左移动rig.onclick=function(){clearInterval(timer);animate(ad,-5);};}</script></head><body><divclass="box"><ulid="ad"><li><imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153lscsitwp7sszb6zs.jpg"alt="0"></li><li><imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042152pfbkbfe8vbtvulfu.jpg"alt="1"></li><li><imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153u3jgn0ds43ndd3dz.jpg"alt="2"></li><li><imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042152juuohne22z60hbsb.jpg"alt="3"></li><li><imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153lscsitwp7sszb6zs.jpg"alt="4"></li></ul><spanid="left"></span><spanid="right"></span></div></body></html> </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
js如何实现无缝滚动图的详细内容，希望对您有所帮助，信息来源于网络。