·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> ASP.NET中使用JavaScript实现图片自动水平滚动效果

【如有意向点此提交需求】关于我们

ASP.NET中使用JavaScript实现图片自动水平滚动效果

作者：佚名      ASP.NET网站开发编辑：admin      更新时间：2022-07-23

asp.net中使用javaScript实现图片自动水平滚动效果

参照网上的资料，在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 id="form1" runat="server"> <div style="width:850px;">ASP.NET中使用JavaScript实现图片自动水平滚动</div> <div id="demo" style="overflow: hidden; width: 850px; height: 300px;"> <!--修改显示区域的宽度,不能超过滚动部分表格的宽度--> <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> <!--滚动部分表格结束--> </TD> <td id="demo2"> </td> </tr> </tbody> </TABLE> </FooterTemplate> </asp:Repeater> </div> <script type="text/javascript"> var speed3 = 15//速度数值越大速度越慢 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、后台代码，主要是实现数据绑定：

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