參照網(wǎng)上的資料，在ASP.NET中使用Javascript實現(xiàn)圖片自動水平滾動效果。
1、頁面前臺代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageScroll.aspx.cs" Inherits="SlideDemo.ImageScroll" %>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/CSS"> * { margin:0px auto; padding:0px; } #scrolltable { width:900px; } .scrollimg { border:0px; width:300px; height:200px; /*margin:0px 0px;*/ } </style></head><body> <form id="form1" runat="server"> <div style="width:850px;">ASP.NET中使用JavaScript實現(xiàn)圖片自動水平滾動</div> <div id="demo" style="overflow: hidden; width: 850px; height: 300px;"> <!--修改顯示區(qū)域的寬度,不能超過滾動部分表格的寬度--> <asp:Repeater ID="ScrollRepeater" runat="server"> <HeaderTemplate> <table border="0"> <tbody> <tr> <td id="demo1"> <!--滾動部分表格開始--> <table border="0" id="scrolltable"> <tr> </HeaderTemplate> <ItemTemplate> <td> <a title='<%#Eval("Title")%>' target="_blank" href='<%#Eval("Href")%>'> <img class="scrollimg" src='<%#Eval("Src")%>' alt='<%#Eval("Title") %>' /> </a> </td> </ItemTemplate> <FooterTemplate> </tr> </table> <!--滾動部分表格結(jié)束--> </TD> <td id="demo2"> </td> </tr> </tbody> </TABLE> </FooterTemplate> </asp:Repeater> </div> <script type="text/javascript"> var speed3 = 15//速度數(shù)值越大速度越慢 var demo = document.getElementById("demo"); var demo1 = document.getElementById("demo1"); var demo2 = document.getElementById("demo2"); demo2.innerHTML = demo1.innerHTML function Marquee() {
if (demo2.offsetWidth - demo.scrollLeft <= 0)
demo.scrollLeft -= demo1.offsetWidth
else {
demo.scrollLeft++
}
}
var MyMar = setInterval(Marquee, speed3)
demo.onmouSEOver = function () { clearInterval(MyMar) }
demo.onmouseout = function () { MyMar = setInterval(Marquee, speed3) }
</script>
</form></body></html>
2、后臺代碼，主要是實現(xiàn)數(shù)據(jù)綁定：
PRotected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindSroll(); } } private void BindSroll() { List<MyItem> list = new List<MyItem>(); MyItem item1 = new MyItem(); item1.Title = "item1"; item1.Src = "images/1.jpg"; item1.; MyItem item2 = new MyItem(); item2.Title = "item2"; item2.Src = "images/2.jpg"; item2.; MyItem item3 = new MyItem(); item3.Title = "item3"; item3.Src = "images/3.jpg"; item3.; list.Add(item1); list.Add(item2); list.Add(item3); ScrollRepeater.DataSource = list; ScrollRepeater.DataBind();
}
下載Demo
新聞熱點
疑難解答
