js设置图片或文字自动左右滚动控制,鼠标经过停留

最新推荐文章于 2021-11-05 20:46:16 发布

fendoudxiaohouzi

最新推荐文章于 2021-11-05 20:46:16 发布

阅读量1k

点赞数 2

分类专栏：自己的收藏文章标签： function border table div

本文链接：https://blog.csdn.net/fendoudxiaohouzi/article/details/6725033

版权

自己的收藏专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html>
<head></head>
<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").οnmοuseοver=function() {clearInterval(MyMar)}
document.getElementById("demo").οnmοuseοut=function() {if(t){MyMar=setInterval(RMarquee,speed3)}else{MyMar=setInterval(Marquee,speed3)}}
document.getElementById('mcc').οnmοuseοut=function(){clearInterval(MyMar);MyMar=setInterval(RMarquee,speed3);}
document.getElementById('aa').οnmοuseοut=function(){clearInterval(MyMar);MyMar=setInterval(Marquee,speed3);}
</script>
</BODY>
</html>