参照网上的资料，在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

ASP.NET中使用JavaScript实现图片自动水平滚动效果的更多相关文章

  1. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

  2. jquery 图片自动无缝滚动

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

  3. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

  4. Asp.net中前台javascript与后台C#交互

    方法一:使用Ajax开发框架,后台方法定义前添加[AjaxPro.AjaxMethod],然后就可以在前台js脚本中调用后台C#函数. 方法二:后台方法声明为public或者protected,然后前 ...

  5. javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果

    最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...

  6. JS实现 鼠标放上去 图片自动放大的效果

    前段时间做项目,要实现,一张图片,鼠标放上去图片自动变大的效果,虽然难度不大,但当时也想了一段时间,当时没时间记录一下,现在有时间了,写篇博客把代码给记录一下: 效果如下: 代码如下: <!DO ...

  7. JQuery图片轮播滚动效果(网页效果--每日一更)

    今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...

  8. 用js实现图片的无缝滚动效果

    实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...

  9. 二、JavaScript语言--JS实践--信息滚动效果制作

    运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由 ...

随机推荐

  1. nginx check_http_send type=http 查检测不到后端TOM的存活

    原因:定位到../conf/server.xml中 <Connector port="8020" protocol="org.apache.coyote.http1 ...

  2. rabbitmq 二进制安装

    # wget -Uvh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm # ls epel-rele ...

  3. Android Manifest <meta-data>

    在接入第三方渠道SDK的时候,经常会看到其配置文件AndroidManifest.xml有类似如下的定义: <!-- appid --> <meta-data android:nam ...

  4. [MyBean说明书]-添加IApplicationContextEx01接口手动加载库文件

    主控台接口实现了IApplicationContextEx01接口,可以手动执行加载DLL和配置文件,具体使用方法可以参见DEMO(samples\manualLoadLib)   IApplicat ...

  5. webpack打包调试react并使用babel编译jsx配置方法

    http://lxj8749.iteye.com/blog/2287074 ********************************************** 安装webpack npm i ...

  6. 数据挖掘算法之-关联规则挖掘(Association Rule)

    在数据挖掘的知识模式中,关联规则模式是比较重要的一种.关联规则的概念由Agrawal.Imielinski.Swami 提出,是数据中一种简单但很实用的规则.关联规则模式属于描述型模式,发现关联规则的 ...

  7. ubuntu 16.04如何生成ssh key以及如何查看ssh key

    检查本地是否有SSH Key存在 在终端输入 ls -al ~/.ssh 如果输出的是: No such file or directory 那就没有ssh key 如果有就会出现这样: 生成新的SS ...

  8. JAVA-JSP内置对象之out对象

    相关资料:<21天学通Java Web开发> out对象1.out对象用来向网页输出信息. 方法                            返回值            方法说 ...

  9. [转]ExtJS3.0与KindEditor4.1.2整合

    原文地址:http://blog.csdn.net/resigshy/article/details/7937021 ExtJS与KindEditor整合的方式. /** * 将KindEditor4 ...

  10. spark streaming从指定offset处消费Kafka数据

    spark streaming从指定offset处消费Kafka数据 -- : 770人阅读 评论() 收藏 举报 分类: spark() 原文地址:http://blog.csdn.net/high ...