图片不停的横滚

<html>
<body>
<table>
   <tr>
<td>      //下面的div必不可少,非常重要。。。                                                                                                                                                                                 
           <div id=BEIJING style=overflow:hidden;height:120px;700px>
               <table>
                   <tr>
                       <td id=HAIDIAN>
                           <table>
                               <tr>
                                   <td><img src="1.jpg"</td>
                                   <td><img src="2.jpg"></td>
                                   <td><img src="3.jpg"></td>
                                   <td><img src="4.jpg"</td>
                                   <td><img src="5.jpg"</td>
                               </tr>
                           </table>
                       </td>
                      
                        <td id=CHAOYANG>
                        </td>

                    </tr>
                </table>
            </div>
<script>
    var speed=10        //速度数值越大速度越慢
    CHAOYANG.innerHTML=HAIDIAN.innerHTML
    function Marquee()
    {
        if(CHAOYANG.offsetWidth-BEIJING.scrollLeft<=0)
        {
            BEIJING.scrollLeft-=HAIDIAN.offsetWidth
        }
        else
        {
            BEIJING.scrollLeft++
        }
    }

    var MyMar=setInterval(Marquee,speed)
    BEIJING.onmouseover=function()
    {
        clearInterval(MyMar)
    }
    BEIJING.onmouseout=function()
    {
        MyMar=setInterval(Marquee,speed)
    }
</script>

        </td>
    </tr>                                                                                                                                                                                                                           
</table>

</body>
</html>
==============================
上面是普通的,下面的是DataList中滚动
==============================
<table>      //标准DataList图片横滚
    <tr>
        <td>
            <div id="demo" style="OVERFLOW: hidden; WIDTH: 1000px; HEIGHT: 125px">
            <table>
            <tr>
                <td id="demo1">
                    <asp:datalist id="DataList1" runat="server" Width="712px" RepeatDirection="Horizontal">
                    <ItemTemplate>

                    <table>
                    <tr>
                        <td>
                            <asp:Label ID="Label1" runat="server" Text='<%# Eval("title") %>'></asp:Label>
                        </td>
                    </tr>
                    <tr>
                    <td>
                        <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Photo") %>' />
                    </td>
                    </tr>
                    </table>
                    </ItemTemplate>

                    </asp:datalist>
                </td>
                <td id="demo2">
                </td>

            </tr>
            </table>
            </div>
        </td>
    </tr>
</table>

<script language="javascript" type="text/javascript">
var Picspeed=30
demo2.innerHTML=demo1.innerHTML
function Marquee1(){
if(demo2.offsetWidth-demo.scrollLeft <=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,Picspeed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee1,Picspeed)}
</script>
原文地址:https://www.cnblogs.com/zjw/p/1233586.html