求ASP.net图片不间断滚动的完整例子

1、图片的路径从SQl数据库里面取2、前台代码3、后台代码... 1、图片的路径从SQl 数据库里面取2、前台代码3、后台代码 展开
 我来答
1个回答
#热议# 为什么有人显老，有人显年轻？
匿名用户
2013-08-29
展开全部
<%@ Page Language="C#" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>图片滚动</title>
</head>
<body><!--最新图文代码开银睁始-->
<script type="text/javascript">
<!--
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>悔橘0){
flag=true;
if(image.width/image.height>= 105/80){
if(image.width>105){
ImgD.width=105;
ImgD.height=(image.height*105)/image.width;
} else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt="点击查看详细信息...";
}
else{
if(image.height>80){
ImgD.height=80;
ImgD.width=(image.width*80)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt="详细信息...";
}
}
}
//-->
</script>

<div align='center' id='demo' style='overflow:hidden;height:125px;width:645px;'><!--滚动区的高度和宽度-->
<table align='center' cellpadding='0' cellspace='0' border='0'>
<tr>
<td id='demo1' valign='top' style="width: 3px">
<table width='100%' cellpadding='0' cellspacing='0' border='0' align='center'>
<tr valign='top'>
<td align='center' style="height: 122px">
<asp:DataList ID="DataList1" runat="server" DataSourceID="ObjectDataSource1" RepeatDirection="Horizontal">//这里我用的DataList
<ItemTemplate>
<TABLE width="100%" border="0" align="center" cellpadding="0" cellSpacing="0">
<碧搏团TR>
<TD rowspan=3 style="width: 8px; height: 84px;" ></TD>
<TD vAlign=top width=8 style="height: 84px"></TD>
<TD background="" rowspan="2" style="height: 84px">
<img src="Images/<%#eval_r("MingZi") %>" alt="点击查看..." width="105" height="80" border="0" onload="javascript:DrawImage(this);">
</TD>
<TD vAlign=top style="width: 7px; height: 84px;"></TD>
</TR>
</TABLE>
</ItemTemplate>
</asp:DataList>
</td>
</tr>
</table>
</td>
<td id="demo2" valign="top" style="width: 1px"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var Picspeed=15
demo2.innerHTML=demo1.innerHTML
function Marquee1(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,Picspeed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee1,Picspeed)}
</script>
<!--最新图文代码结束-->
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="selseimage"
TypeName="BLL.BI"></asp:ObjectDataSource>//这里使用ObjectDataSource控件绑定数据
</body>
</html>这里最主要的就是那两个js代码。上边的js实现了图片大小的控制，下边的js实现了图片无缝隙（有好多用marquee属性直接滚动的，直到全部滚动完毕才开始下一次的滚动，这样就会出现了很大的空白）这样就解决了空白问题。用DateList可以控制显示的方向，但是不要控制显示数量，这里限制数量是靠div的宽度和高度控制的。根据实际滚动方向调整DateList的显示方向。这里最难理解的就是下面的js。其实无缝滚动的精华就在这里。下面给大家解释一下。var Picspeed=15就是设置计数器停顿时间（滚动速度）其中还有一些奇怪的属性，以下给大家介绍一下无缝技术的原理：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。
先了解一下对象的几个的属性：
innerHTML:设置或获取位于对象起始和结束标签内的 HTML
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度根据这些就可以随意改变上边的代码实现上下左右的无缝滚动了。参考以下滚动简单的修改就可以实现了：向上滚动：<div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff><div id=demo1>
<img src="images/flash8.gif">
<img src="images/link/flashempire.gif">
<img src="images/linklogo/shlogo.gif">
<img src="images/link/deskcity.gif">
<img src="images/linklogo/5dmeng.gif">
<img src="/Upload/2004_Pack/logo.gif">
<img src="images/link/flashskylogo.gif">
<img src="images/link/5dlogo88.gif">
<img src="/Upload/2004_Pack/link.gif">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed) //设置定时器
demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器
</script>向下滚动：<div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff>
<div id=demo1>
<img src="images/flash8.gif">
<img src="images/link/flashempire.gif">
<img src="images/linklogo/shlogo.gif">
<img src="images/link/deskcity.gif">
<img src="images/linklogo/5dmeng.gif">
<img src="/Upload/2004_Pack/logo.gif">
<img src="images/link/flashskylogo.gif">
<img src="images/link/5dlogo88.gif">
<img src="/Upload/2004_Pack/link.gif">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>向左滚动：<div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top>
<img src="images/link/flashempire.gif"><img src="images/linklogo/shlogo.gif">
<img src="images/link/deskcity.gif"><img src="images/linklogo/5dmeng.gif">
<img src="/Upload/2004_Pack/logo.gif"><img src="images/link/flashskylogo.gif">
<img src="images/link/5dlogo88.gif"><img src="/Upload/2004_Pack/link.gif">
<img src="images/flash8.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>向右滚动：<div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top>
<img src="images/link/flashempire.gif"><img src="images/linklogo/shlogo.gif">
<img src="images/link/deskcity.gif"><img src="images/linklogo/5dmeng.gif">
<img src="/Upload/2004_Pack/logo.gif"><img src="images/link/flashskylogo.gif">
<img src="images/link/5dlogo88.gif"><img src="/Upload/2004_Pack/link.gif">
<img src="images/flash8.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
本回答由网友推荐
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2024Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式