- <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="#" 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="#" 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>
兼容FF,JS不间断循环滚动,包含自滚动,左右自滚动,点击左右滚动,鼠标暂停效果
最新推荐文章于 2019-03-31 12:34:00 发布