参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果。

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 );
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、后台代码,主要是实现数据绑定:

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.Href = "http://www.szit.edu.cn";
MyItem item2 = new MyItem();
item2.Title = "item2";
item2.Src = "images/2.jpg";
item2.Href = "http://www.sohu.com";
MyItem item3 = new MyItem();
item3.Title = "item3";
item3.Src = "images/3.jpg";
item3.Href = "http://www.sina.com";
list.Add(item1);
list.Add(item2);
list.Add(item3);
ScrollRepeater.DataSource = list;
ScrollRepeater.DataBind();

}

下载Demo

相关文章: