图片循环滚动左右循环滚动只适用IE FF自行修改~

最新推荐文章于 2021-06-04 19:26:27 发布

转载最新推荐文章于 2021-06-04 19:26:27 发布 · 780 阅读

文章标签：

#ie #border #function #table #div

javascript 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的页面元素滚动效果案例。通过不断更新元素的位置来达到类似跑马灯的效果，展示了基本的HTML页面结构及如何利用JavaScript进行DOM操作。

<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2800.1522" name=GENERATOR></HEAD>
<BODY>
<TABLE height=130 cellSpacing=0 cellPadding=0 width=410 border=0>
<TBODY>
<TR>
    <TD vAlign=center align=middle height="96%">
      <DIV id=demo
      style="BACKGROUND: #214984; OVERFLOW: hidden; WIDTH: 400px; COLOR: #ffffff; HEIGHT: 122px">
      <TABLE cellSpacing=0 cellPadding=0 align=center border=0>
        <TBODY>
        <TR>
          <TD id=demo1 vAlign=top><IMG height=120 src="/images/logo.gif"
            width=180 border=0><IMG height=120 src="/images/btn6.gif"
            width=170><IMG height=120 src="/images/btn5.gif" width=170><IMG
            height=120 src="/images/btn4.gif" width=170><IMG height=120
            src="/images/btn3.gif" width=170> </TD>
          <TD id=demo2
vAlign=top></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>
<SCRIPT>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>
</BODY></HTML>