原生态JS  图片滚动

      这里写的是原生态的JS图片滚动。

           说明:scroll_begin 和scroll_end 必须为一个table里的两个相邻的<td>

           注意:scroll_begin里面的div宽度最好能等于Scroll_div 的宽度

 <div id="scroll_div" style="overflow: hidden;  997px; margin: auto;">
        <table cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td id="scroll_begin" valign="top">
                    <asp:Repeater ID="rptTrainPlan" runat="server">
                        <ItemTemplate>
                            <div style=" 997px; color: #ff6600">
                                <a href='TPDetail.aspx?id=<%# Eval("TPId") %>' style="color: #ff6600">
                                    <%# Eval("Title") %>  [<%# Eval("TrainDate")%>] </a>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </td>
                <td id="scroll_end">
                </td>
            </tr>
        </table>
    </div>
    <script language="javascript" type="text/javascript">        //滚动速度        var speed = 20;
        scroll_end.innerHTML = scroll_begin.innerHTML;
        function Marquee() {
            if (scroll_begin.offsetWidth < scroll_div.offsetWidth) {
                scroll_end.innerHTML = '';
            }
            if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
                scroll_div.scrollLeft -= scroll_begin.offsetWidth
            else {
                scroll_div.scrollLeft++;
            }
        }
        var MyMar = setInterval(Marquee, speed);
       //事件注册        scroll_div.onmouseover = function () {
            clearInterval(MyMar);
        }
      //事件注册        scroll_div.onmouseout = function () {
            MyMar = setInterval(Marquee, speed);
        }
    </script>

  

原文地址:https://www.cnblogs.com/jiangqiang/p/2777561.html