参照网上的资料，在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. Android 4.1的新特性介绍

    原文:http://android.eoe.cn/topic/summary 果冻豆 - Android 4.1 通知系统 - Notifications 在Android 4.1系统上通知的功能大大 ...

  2. 微信小程序实现给循环列表添加点击样式实例

    微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: ? 1 ...

  3. 随便浏览感觉简单易用的Orm

    https://www.cnblogs.com/babietongtianta/p/4365195.html CYQ ITDOS CHOLE.ORM

  4. Project Euler：Problem 32 Pandigital products

    We shall say that an n-digit number is pandigital if it makes use of all the digits 1 to n exactly o ...

  5. zabbix server 在配置客户端的时候 在zabbix server端的/etc/hosts文件的hostname 对应的ip这样可以更快的让server端发现agent端

    如下: # cat /etc/hosts 127.0.0.1 localhost.localdomain localhost.localdomain localhost4 localhost4.loc ...

  6. Rocket MQ 源码解析

    http://rocketmq.apache.org/rocketmq/the-design-of-transactional-message/ http://www.iocoder.cn/Rocke ...

  7. vue中的filters的用法

    1.效果 金额保留两位小数,并加上单位元 2.index.html <!DOCTYPE html> <html lang="en"> <head> ...

  8. 【转】Unity3D的LightProbe动态光探头用法介绍

    原创至上,移步请戳:Unity3D的LightProbe动态光探头用法介绍 之前曾经介绍过Unity3D的LightMapping烘焙的用法.单独使用的LightMapping效果很好,但由于只是把光 ...

  9. 循环遍历li并获取其自定义属性的方法

    var lists = $('.list'); for (var j = 0; j < lists.length; j++) { var index = $('.list').eq(j).att ...

  10. libevent源码分析：event_add、event_del

    event_add.event_del两个函数分别是使event生效和失效的,下面就来看一下两个函数的实现. event_add int event_add(struct event *ev, con ...