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

时间:2022-02-12 06:04:50

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

  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>