参照网上的资料，在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. java服务端技术

    服务端框架:1.servlet2.netty 协议:1.http 1.02.http 1.1 数据库:mysql 对象关系映射(ORM)框架:mybatis 缓存:redis eclipse能运行,导 ...

  2. ios 关于屏幕旋转和屏幕晃动

    内置加速计是智能手机最酷的特性之一,ios可以通过这个小设备知道用户握持手机的方式,以及用户是否移动了手机,ios使用加速计处理自动旋转,并且许多游戏都是用它作为控制机制,它还可以用于检测摇动和其他突 ...

  3. 【Unity】6.5 Time类、Mathf类、Coroutine类

    分类:Unity.C#.VS2015 创建日期:2016-04-20 一.Time类 Unity引擎提供的Time类可获取和时间有关的信息.计算帧速率.调整时间流逝速度等. 1.成员变量 2.示例 ( ...

  4. 服务器重启后如何开启由docker部署的redmine

    1. 服务器重启后,需要重新开启docker服务 systemctl start docker 2. 查看全部container,包括exited的容器,找出redmine所对应的NAMES标签名称 ...

  5. linux命令（46）：批量更改文件后缀，文件名

    linux shell 1.要将所有 jpeg的后缀名图片文件修改为 jpg文件. rename .jpeg .jpg *.jpeg

  6. 【转】（七）unity4.6Ugui中文教程文档-------概要-UGUI Auto Layout

    原创至上,移步请戳:(七)unity4.6Ugui中文教程文档-------概要-UGUI Auto Layout 6. Auto Layout Rect Transform布局系统是足够灵活,可以处 ...

  7. 【Acm】八皇后问题

    八皇后问题,是一个古老而著名的问题,是回溯算法的典型例题. 其解决办法和我以前发过的[算法之美—Fire Net:www.cnblogs.com/lcw/p/3159414.html]类似 题目:在8 ...

  8. 【Java】通用版URLConnection 带cookie下载PDF等资源文件

    /**** * 下载pdf文件 */ public static void downloadNet(String urlStr, String fileName, String savePath) t ...

  9. 02-老马jQuery教程-jQuery事件处理

    1. 绑定简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉. jQuery简单绑定事件的方式,可以让我绑定多个事件处理程序跟 ...

  10. 【计算机网络基础】TCP/IP、HTTP、Socket的概念

    TCP/IP协议是一个协议簇.里面包括很多协议的.UDP也是其中的一个.之所以命名为TCP/IP协议,因为TCP,IP协议是两个很重要的协议,就用他两命名了.(资料来源: http://www.cnb ...