兼容FF，JS不间断循环滚动，包含自滚动，左右自滚动，点击左右滚动，鼠标暂停效果

本文介绍了一种使用JavaScript实现的不间断循环滚动效果，适用于网站导航栏或公告栏等场景。通过设置速度参数和监听鼠标事件来控制滚动方向及速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<BODY leftMargin=0 topMargin=2 marginheight="0" marginwidth="0"> <CENTER> <p> <h1>JS不间断循环滚动</h1><p> <TABLE style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid" cellSpacing=0 cellPadding=0 width=750 align=center border=0> <TBODY> <TR><td width="30"><a href="#" mce_href="#" onClick="clickdiv()" id="aa">向左</a></td> <TD> <DIV id=demo style="OVERFLOW: hidden; WIDTH: 750px; COLOR: #ffffff"> <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0"> <TBODY> <TR> <TD id=demo1 vAlign=top><table width="1710" height="116" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="171" background="pic_bg.jpg"><div align="center">内容一</div></td> <td width="171" background="pic_bg.jpg"><div align="center">内容二</div></td> <td width="171" background="pic_bg.jpg"><div align="center">内容三</div></td> <td width="171" background="pic_bg.jpg"><div align="center">内容四</div></td> <td width="171" background="pic_bg.jpg"><div align="center">内容五</div></td> <td width="171" background="pic_bg.jpg"><div align="center">内容六</div></td> <td width="171" background="pic_bg.jpg"><div align="center">内容七</div></td> <td width="171" background="pic_bg.jpg"><div align="center">内容八</div></td> <td width="171" background="pic_bg.jpg"><div align="center">内容九</div></td> <td width="171" background="pic_bg.jpg"><div align="center">内容十</div></td> </tr> </table></TD> <TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV> </TD><td width="30"><a href="#" mce_href="#" onClick="Rclickdiv()" id="mcc">向右</a></td></TR></TBODY></TABLE></TD></TR></TABLE> </CENTER><SCRIPT> var speed3=25//速度数值越大速度越慢 var t=false; var id="aa"; document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML function Marquee(){ if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0) document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth else{ document.getElementById("demo").scrollLeft++ } t=false; } function RMarquee(){ if(document.getElementById("demo").scrollLeft<=0) document.getElementById("demo").scrollLeft+=document.getElementById("demo2").offsetWidth else{ document.getElementById("demo").scrollLeft-- } t=true; } function clickdiv(){ clearInterval(MyMar) Marquee(); } function Rclickdiv(){ clearInterval(MyMar) RMarquee(); } var MyMar=setInterval(Marquee,speed3) document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)} document.getElementById("demo").onmouseout=function() {if(t){MyMar=setInterval(RMarquee,speed3)}else{MyMar=setInterval(Marquee,speed3)}} document.getElementById('mcc').onmouseout=function(){clearInterval(MyMar);MyMar=setInterval(RMarquee,speed3);} document.getElementById('aa').onmouseout=function(){clearInterval(MyMar);MyMar=setInterval(Marquee,speed3);} </SCRIPT> </BODY> 本文来自优快云博客，转载请标明出处：http://blog.youkuaiyun.com/chinmo/archive/2008/09/12/2915629.aspx