ASP.NET中利用DataList實現圖片無縫滾動 實例分享
更新時間:2013年06月07日 10:44:00 作者:
這個問題之前也困擾我,后來解決了,拿出來分享下,以后用也方便,代碼很容易看懂,不多說什么了
[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++
} chabaoo.cn
var MyMar = setInterval(Marquee, speed)
demo.onmouseover = function () { clearInterval(MyMar) }
demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
</script>
復制代碼 代碼如下:
<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++
} chabaoo.cn
var MyMar = setInterval(Marquee, speed)
demo.onmouseover = function () { clearInterval(MyMar) }
demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
</script>
您可能感興趣的文章:
- asp.net中Datalist使用數字分頁的實現方法
- asp.net中將數據庫綁定到DataList控件的實現方法與實例代碼
- ASP.Net 之Datalist刪除功能詳解附代碼
- asp.net datalist綁定數據后可以上移下移實現示例
- 在ASP.NET 2.0中操作數據之三十五:使用Repeater和DataList單頁面實現主/從報表
- 在ASP.NET 2.0中操作數據之三十六:在DataList里編輯和刪除數據概述
- 在ASP.NET 2.0中操作數據之三十七:DataList批量更新
- asp.net控件DataList分頁用法
- 在ASP.NET 2.0中操作數據之三十九:在DataList的編輯界面里添加驗證控件
- 在ASP.NET 2.0中操作數據之四十:自定義DataList編輯界面
相關文章
Aspnetpager對GridView分頁并順利導出Excel
這篇文章主要介紹了Aspnetpager對GridView分頁并順利導出Excel的相關資料,需要的朋友可以參考下2016-04-04ASP.NET Core 3框架揭秘之 異步線程無法使用IServiceProvider問題
這篇文章主要介紹了ASP.NET Core 3框架揭秘之異步線程無法使用IServiceProvider問題,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12