ASP.NET中利用DataList实现图片无缝滚动
这个问题之前也困扰我,后来解决了,拿出来分享下,以后用也方便,代码很容易看懂,不多说什么了
- <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++
- }
- var MyMar = setInterval(Marquee, speed)
- demo.onmouseover = function () { clearInterval(MyMar) }
- demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
- </script>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 字符编码:从基础到乱码解决