服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|JAVA教程|ASP教程|

服务器之家 - 编程语言 - ASP.NET教程 - ASP.NET中利用DataList实现图片无缝滚动 实例分享

ASP.NET中利用DataList实现图片无缝滚动 实例分享

2019-11-10 11:57asp.net教程网 ASP.NET教程

这个问题之前也困扰我,后来解决了,拿出来分享下,以后用也方便,代码很容易看懂,不多说什么了

[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> 
        //滚动的速度,数值越大速度越慢 
        var speed = 20 
        demo2.innerHTML = demo1.innerHTML 
        //从右至左  
        function Marquee() { 
            if (demo1.offsetWidth - demo.scrollLeft <= 0) 
                demo.scrollLeft = 0 
            else 
                demo.scrollLeft++ 
        }  www.zzvips.com
        var MyMar = setInterval(Marquee, speed) 
        demo.onmouseover = function () { clearInterval(MyMar) } 
        demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) }  
    </script> 

延伸 · 阅读

精彩推荐