技术开发 频道

经典的图片无缝滚动,点击向左向右按钮还可以控制方向


【IT168技术文档】

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>zhouxuanmsn@hotmail.com</title> </head> <body> <div id="demo" style="overflow:hidden;height:120px;width:600px;color:#ffffff"> <table align=left cellpadding=0 border=0><tr><td id="demo1" valign=top> <table border=0 cellpadding=0 cellspacing=0> <tr> <td><img src=images/03.gif width=150 height=100></td> <td><img src=images/03.gif width=150 height=100></td> <td><img src=images/03.gif width=150 height=100></td> <td><img src=images/03.gif width=150 height=100 ></td> <td><img src=images/03.gif width=150 height=100></td> </tr> </table> </td><td id="demo2" valign=top></td></tr></table></div> <script language="javascript"> var LeftMyMar; var MyMar; var speed=30; function MarqueeLeft() { clearInterval(MyMar) demo2.innerHTML=demo1.innerHTML //向左走 function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } LeftMyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(LeftMyMar)} demo.onmouseout=function() {LeftMyMar=setInterval(Marquee,speed)} } MarqueeLeft(); function MarqueeRight() { clearInterval(LeftMyMar) demo2.innerHTML=demo1.innerHTML demo.scrollLeft=demo.scrollWidth function Marquee(){ if(demo.scrollLeft<=0) demo.scrollLeft+=demo2.offsetWidth else{ demo.scrollLeft-- } } MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} } </script> <a href="#" onClick="MarqueeLeft()">向左</a> <a href="#" onClick="MarqueeRight()">向右</a> </body> </html>
0
相关文章