参照网上的资料，在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. 在vultr中安装coreos

    1.coreos必须使用key文件. 2.生成ssh key -C "your_email@mail.com" 3.拷贝ssh公钥文件内容.默认为id_rsa.pub 4.编辑vu ...

  2. android 圆角编写(懒得去找，写给自己看的)

    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="r ...

  3. [svc]linux文件权限

    linux中,每个文件拥有三种权限 f dir权限位最佳实战 权限 对文件的影响 对文件夹的影响 r 可读取/阅读文件的内容 可以列出目录内容,无法cd,ls -l看到文件名,属性是乱码. w 可修改 ...

  4. 比较有用的sql语句

    一.基础 .说明:创建数据库 CREATE DATABASE database-name .说明:删除数据库 drop database dbname .说明:备份sql server --- 创建 ...

  5. vue-cli 本地数据模拟

    方法一: 使用express搭建静态服务 mock数据写在json文件中,proxyTable 里将接口代理到具体mock数据json文件上.具体方法: 创建 mock 文件夹 build/dev-s ...

  6. G1 Garbage Collector and Shenandoah

    http://www.diva-portal.se/smash/get/diva2:754515/FULLTEXT01.pdf https://is.muni.cz/th/ifz8g/GarbageC ...

  7. [Windows Azure] Administering your Windows Azure AD tenant

    Administering your Windows Azure AD tenant 19 out of 20 rated this helpful - Rate this topic Publish ...

  8. javascript基础拾遗(八)

    1.原型继承 如何让一个对象继承另一个对象? function Language(name){ this.name = name this.score = 8.0 } Language.prototy ...

  9. android Socket 编程

    Socket 通信 1.UDP实现  (DatagramSocket) [客户端] //首先创建一个DatagramSocket对象 DatagramSocket socket = new Datag ...

  10. ZooKeeper学习之文件系统的布局和格式

    本文来谈谈快照文件,事务日志文件在文件系统中是如何存放的. 写事务日志是事务处理的关键步骤,所以高度建议在一个独立的磁盘上存储.快照不需要在独立的磁盘存储,因为它们是由一个后台线程以懒汉式的(lazi ...