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

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

[html] view plaincopyprint?
 
  1. <div id="demo" style="overflow: hidden; width: 441px; border: 0px">  
  2.         <table width="441" height="130" border="0" cellpadding="0" cellspacing="0" background="Images/img2/32.jpg">  
  3.             <tr>  
  4.                 <td align="center" id="demo1" valign="bottom">  
  5.                     <asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" DataSourceID="ObjectDataSource1">  
  6.                         <ItemTemplate>  
  7.                             <table>  
  8.                                 <tr>  
  9.                                     <td>  
  10.                                         <asp:ImageButton ID="imgbtnInfo" runat="server" ImageUrl='<%#Eval("Spic") %>' OnClick="imgbtnInfo_Click"  
  11.                                             CommandArgument='<%#Eval("ID") %>' />  
  12.                                     </td>  
  13.                                 </tr>  
  14.                                 <tr>  
  15.                                     <td align="center">  
  16.                                         <asp:LinkButton ID="lkbtnInfo" CommandArgument='<%#Eval("ID") %>' runat="server"  
  17.                                             OnClick="lkbtnInfo_Click" CssClass="bb" Text='<%#Eval("Type") %>'></asp:LinkButton>  
  18.                                     </td>  
  19.                                 </tr>  
  20.                             </table>  
  21.                         </ItemTemplate>  
  22.                     </asp:DataList>  
  23.                     <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="SelectInfo"  
  24.                         TypeName="HotelDAL.KeFangServices"></asp:ObjectDataSource>  
  25.                 </td>  
  26.                 <%-- 这一步很重要 --%>  
  27.                 <td id="demo2" align="center" valign="bottom">  
  28.                 </td>  
  29.             </tr>  
  30.         </table>  
  31.     </div>  
  32.     <script>  
  33.         //滚动的速度，数值越大速度越慢  
  34.         var speed = 20  
  35.         demo2.innerHTML = demo1.innerHTML  
  36.         //从右至左   
  37.         function Marquee() {  
  38.             if (demo1.offsetWidth - demo.scrollLeft <= 0)  
  39.                 demo.scrollLeft = 0  
  40.             else  
  41.                 demo.scrollLeft++  
  42.         }  
  43.         var MyMar = setInterval(Marquee, speed)  
  44.         demo.onmouseover = function () { clearInterval(MyMar) }  
  45.         demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) }   
  46.     </script>  
posted @ 2015-06-08 09:12  Ranran  阅读(630)  评论(0)  编辑  收藏  举报