JS实现图片无间断滚动代码汇总
本文整理汇总了JavaScript实现图片滚动的常见代码,可以实现向上下左右四个方向的无缝滚动的效果,这是前端设计开发时常用的一个图片特效,你可只用其中的一种滚动效果。
具体的实例代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN"xml:lang="zh-CN"> <head> <title>图片滚动代码合集</title> <scripttype="text/javascript"> //自动滚动 functionboxmove(d1,d2,d3,e,obj){ varspeed=30; vardemo=document.getElementById(d1); vardemo1=document.getElementById(d2); vardemo2=document.getElementById(d3); demo2.innerHTML=demo1.innerHTML; functionboxTop(){ if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight} else{demo.scrollTop++} } functionboxRight(){ if(demo.scrollLeft<=0){demo.scrollLeft+=demo2.offsetWidth} else{demo.scrollLeft--} } functionboxBottom(){ if(demo1.offsetTop-demo.scrollTop>=0){demo.scrollTop+=demo2.offsetHeight} else{demo.scrollTop--} } functionboxLeft(){ if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth} else{demo.scrollLeft++} } if(e==1){ varMoveTop=setInterval(boxTop,speed); demo.onmouseover=function(){clearInterval(MoveTop);} demo.onmouseout=function(){MoveTop=setInterval(boxTop,speed)} } if(e==2){ varMoveRight=setInterval(boxRight,speed); demo.onmouseover=function(){clearInterval(MoveRight)} demo.onmouseout=function(){MoveRight=setInterval(boxRight,speed)} } if(e==3){ varMoveBottom=setInterval(boxBottom,speed); demo.onmouseover=function(){clearInterval(MoveBottom);} demo.onmouseout=function(){MoveBottom=setInterval(boxBottom,speed)} } if(e==4){ varMoveLeft=setInterval(boxLeft,speed) demo.onmouseover=function(){clearInterval(MoveLeft)} demo.onmouseout=function(){MoveLeft=setInterval(boxLeft,speed)} } if(e=="top"){ MoveTop=setInterval(boxTop,speed) obj.onmouseout=function(){clearInterval(MoveTop);} } if(e=="right"){ MoveRight=setInterval(boxRight,speed) obj.onmouseout=function(){clearInterval(MoveRight);} } if(e=="bottom"){ MoveBottom=setInterval(boxBottom,speed) obj.onmouseout=function(){clearInterval(MoveBottom);} } if(e=="left"){ MoveLeft=setInterval(boxLeft,speed) obj.onmouseout=function(){clearInterval(MoveLeft);} } } </script> <styletype="text/css"> div#a,div#b,div#c,div#d{float:left;} h2{clear:both;} div#b,div#d,div#bb{white-space:nowrap;} </style> </head> <body> <h1>滚动合集</h1> <hr/> <h2>向上</h2> <divid="a"style="overflow:hidden;height:100px;width:90px;"> <divid="a1"> <imgsrc="/images/logo.gif1"alt=""/> <imgsrc="/images/logo.gif2"alt=""/> <imgsrc="/images/logo.gif3"alt=""/> <imgsrc="/images/logo.gif4"alt=""/> <imgsrc="/images/logo.gif5"alt=""/> <imgsrc="/images/logo.gif6"alt=""/> <imgsrc="/images/logo.gif7"alt=""/> <imgsrc="/images/logo.gif8"alt=""/> </div> <divid="a2"></div> </div> <scripttype="text/javascript"> boxmove("a","a1","a2",1); </script> <h2>向右</h2> <divid="b"style="overflow:hidden;height:100px;width:90px;"> <divid="b1"> <imgsrc="/images/logo.gif1"alt=""/> <imgsrc="/images/logo.gif2"alt=""/> <imgsrc="/images/logo.gif3"alt=""/> <imgsrc="/images/logo.gif4"alt=""/> <imgsrc="/images/logo.gif5"alt=""/> <imgsrc="/images/logo.gif6"alt=""/> <imgsrc="/images/logo.gif7"alt=""/> <imgsrc="/images/logo.gif8"alt=""/> </div> <divid="b2"></div> </div> <scripttype="text/javascript"> boxmove("b","b1","b2",2); </script> <h2>向下</h2> <divid="c"style="overflow:hidden;height:100px;width:90px;"> <divid="c1"> <imgsrc="/images/logo.gif1"alt=""/> <imgsrc="/images/logo.gif2"alt=""/> <imgsrc="/images/logo.gif3"alt=""/> <imgsrc="/images/logo.gif4"alt=""/> <imgsrc="/images/logo.gif5"alt=""/> <imgsrc="/images/logo.gif6"alt=""/> <imgsrc="/images/logo.gif7"alt=""/> <imgsrc="/images/logo.gif8"alt=""/> </div> <divid="c2"></div> </div> <scripttype="text/javascript"> boxmove("c","c1","c2",3); </script> <h2>向左</h2> <divid="d"style="overflow:hidden;height:100px;width:90px;"> <divid="d1"> <imgsrc="/images/logo.gif1"alt=""/> <imgsrc="/images/logo.gif2"alt=""/> <imgsrc="/images/logo.gif3"alt=""/> <imgsrc="/images/logo.gif4"alt=""/> <imgsrc="/images/logo.gif5"alt=""/> <imgsrc="/images/logo.gif6"alt=""/> <imgsrc="/images/logo.gif7"alt=""/> <imgsrc="/images/logo.gif8"alt=""/> </div> <divid="d2"></div> </div> <scripttype="text/javascript"> boxmove("d","d1","d2",4); </script> <h2>手动滚动-<strongonmouseover="boxmove('aa','aa1','aa2','top',this);">上</strong><strongonmouseover="boxmove('aa','aa1','aa2','bottom',this);">下</strong></h2> <divid="aa"style="overflow:hidden;height:100px;width:90px;"> <divid="aa1"> <imgsrc="/images/logo.gif1"alt=""/> <imgsrc="/images/logo.gif2"alt=""/> <imgsrc="/images/logo.gif3"alt=""/> <imgsrc="/images/logo.gif4"alt=""/> <imgsrc="/images/logo.gif5"alt=""/> <imgsrc="/images/logo.gif6"alt=""/> <imgsrc="/images/logo.gif7"alt=""/> <imgsrc="/images/logo.gif8"alt=""/> </div> <divid="aa2"></div> </div> <h2>手动滚动-<strongonmouseover="boxmove('bb','bb1','bb2','left',this);">左</strong><strongonmouseover="boxmove('bb','bb1','bb2','right',this);">右</strong></h2> <divid="bb"style="overflow:hidden;height:100px;width:90px;"> <divid="bb1"> <imgsrc="/images/logo.gif1"alt=""/> <imgsrc="/images/logo.gif2"alt=""/> <imgsrc="/images/logo.gif3"alt=""/> <imgsrc="/images/logo.gif4"alt=""/> <imgsrc="/images/logo.gif5"alt=""/> <imgsrc="/images/logo.gif6"alt=""/> <imgsrc="/images/logo.gif7"alt=""/> <imgsrc="/images/logo.gif8"alt=""/> </div> <divid="bb2"></div> </div> </body> </html>