同一个页面多次用到JS不间断滚动的问题

Question

当只使用一次JS不间断滚动代码时，图片可以正常滚动，但是使用第二处的时候就不滚动了，修改部分参数后，第二处滚动部分只能滚动一次，然后就自动停止了。 请问有什么方法可以解决？因为需要，同一个页面多次用到滚动的代码

Answer 1

<style type="text/css"> <!-- body,td,th {font-size: 12px;} body {margin:0px;} --> </style> <table width="650" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="18" align="left" valign="middle"><img src="img/left.gif" name="r_l" width="6" height="12" id="r_l" style="cursor:pointer; padding-right:6px;" onclick="r_left()"/></td> <td width="650"> <div id="demo" style="OVERFLOW: hidden; WIDTH: 650px; HEIGHT:100%; margin:0 auto"> <table> <tr> <td width="650" id="demo1"><table width="800" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="top"><a href="#" target="_blank"><img src="img/54069-RG174.jpg" alt="RG174" width="118" height="119" border="0" style="margin-top:3px;border:#c9c9c9 1px solid" onload="DrawImage(this,130);"/></a></td> <td align="center" valign="top"><a href="#" target="_blank"><img src="img/54024-CS5967BVJ.jpg" alt="CS5967BVJ" width="118" height="119" border="0" style="margin-top:3px;border:#c9c9c9 1px solid" onload="DrawImage(this,130);"/></a></td> <td align="center" valign="top"><a href="#" target="_blank"><img src="img/54058-CS1160TBVM.jpg" alt="CS1160TBVM" width="118" height="119" border="0" style="margin-top:3px;border:#c9c9c9 1px solid" onload="DrawImage(this,130);"/></a></td> <td align="center" valign="top"><a href="#" target="_blank"><img src="img/54096-XM-HNC-2.jpg" alt="XM-HNC-2" width="118" height="119" border="0" style="margin-top:3px;border:#c9c9c9 1px solid" onload="DrawImage(this,130);"/></a></td> <td align="center" valign="top"><a href="#" target="_blank"><img src="img/54081-11VATC.jpg" alt="11VATC " width="118" height="119" border="0" style="margin-top:3px;border:#c9c9c9 1px solid" onload="DrawImage(this,130);"/></a></td> <td align="center" valign="top"><a href="#" target="_blank"><img src="img/54008-CS5953BV.jpg" alt="CS5953BV" width="118" height="119" border="0" style="margin-top:3px;border:#c9c9c9 1px solid" onload="DrawImage(this,130);"/></a><a href="#"></a></td> </tr> <tr> <td width="140" height="28" align="center" valign="middle">RG174 </td> <td width="140" align="center" valign="middle">CS5967BVJ </td> <td width="140" align="center" valign="middle">CS1160TBVM </td> <td width="140" align="center" valign="middle">XM-HNC-2 </td> <td width="140" align="center" valign="middle">11VATC </td> <td width="140" align="center" valign="middle">CS5953BV </td> </tr> </table></td> <td id="demo2"></td> </tr> </table> </div> <script> var dir=1//每步移动像素，大＝快 var speed=1//循环周期（毫秒）大＝慢 demo2.innerHTML=demo1.innerHTML function Marquee(){//正常移动 //alert(demo2.offsetWidth+"\n"+demo.scrollLeft) if (dir>0 && (demo2.offsetWidth-demo.scrollLeft)<=0) demo.scrollLeft=0 if (dir<0 &&(demo.scrollLeft<=0)) demo.scrollLeft=demo2.offsetWidth demo.scrollLeft+=dir demo.onmouseover=function() {clearInterval(MyMar)}//暂停移动 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//继续移动 } function r_left(){if (dir=-1)dir=1}//换向左移 function r_right(){if (dir=1)dir=-1}//换向右移 var MyMar=setInterval(Marquee,speed) </script> </td> <td width="18" align="right" valign="middle"><img src="img/right.gif" name="r_r" width="6" height="12" id="r_r" style="cursor:pointer; padding-left:6px;" onclick="r_right()"/></td> </tr> </table>