快捷導(dǎo)航

ASP.NET中利用DataList實(shí)現(xiàn)圖片無(wú)縫滾動(dòng) 實(shí)例分享

更新時(shí)間：2013年06月07日 10:44:00 作者：

這個(gè)問(wèn)題之前也困擾我，后來(lái)解決了，拿出來(lái)分享下，以后用也方便，代碼很容易看懂，不多說(shuō)什么了

[html]

<div id="demo" style="overflow: hidden; width: 441px; border: 0px"> 
        <table width="441" height="130" border="0" cellpadding="0" cellspacing="0" background="Images/img2/32.jpg"> 
            <tr> 
                <td align="center" id="demo1" valign="bottom"> 
                    <asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" DataSourceID="ObjectDataSource1"> 
                        <ItemTemplate> 
                            <table> 
                                <tr> 
                                    <td> 
                                        <asp:ImageButton ID="imgbtnInfo" runat="server" ImageUrl='<%#Eval("Spic") %>' OnClick="imgbtnInfo_Click" 
                                            CommandArgument='<%#Eval("ID") %>' /> 
                                    </td> 
                                </tr> 
                                <tr> 
                                    <td align="center"> 
                                        <asp:LinkButton ID="lkbtnInfo" CommandArgument='<%#Eval("ID") %>' runat="server" 
                                            OnClick="lkbtnInfo_Click" CssClass="bb" Text='<%#Eval("Type") %>'></asp:LinkButton> 
                                    </td> 
                                </tr> 
                            </table> 
                        </ItemTemplate> 
                    </asp:DataList> 
                    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="SelectInfo" 
                        TypeName="HotelDAL.KeFangServices"></asp:ObjectDataSource> 
                </td> 
                <%-- 這一步很重要 --%> 
                <td id="demo2" align="center" valign="bottom"> 
                </td> 
            </tr> 
        </table> 
    </div> 
    <script> 
        //滾動(dòng)的速度，數(shù)值越大速度越慢 
        var speed = 20 
        demo2.innerHTML = demo1.innerHTML 
        //從右至左  
        function Marquee() { 
            if (demo1.offsetWidth - demo.scrollLeft <= 0) 
                demo.scrollLeft = 0 
            else 
                demo.scrollLeft++ 
        }  m.fzitv.net
        var MyMar = setInterval(Marquee, speed) 
        demo.onmouseover = function () { clearInterval(MyMar) } 
        demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) }  
    </script> 