高分请教高手，如何实现asp.net 的 datalist 图片的循环滚动（无间断）

sonicryu 2008-04-29 04:34:17
请教高手

我在asp.net中用

<asp:datalist id="DataList2" runat="server" Height="80px" RepeatDirection="Horizontal"

RepeatColumns="5" Width="688px">
<ItemTemplate>

<FONT face="宋体"><a href='<%# "center.aspx?p_type=" + DataBinder.Eval

(Container.DataItem,"name")%>'>


<asp:Image id="Image4" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem,

"image") %>' Width=120 Height=80>


</asp:Image></a></FONT>

</ItemTemplate>
</asp:datalist> 输出datalist里的图片后


如何实现图片的循环滚动

我用marquee会留白，间断了

用js的话对<asp:datalist> </asp:datalist> 输出的图片无效
...全文
225 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
Idafang 2011-02-11
  • 打赏
  • 举报
 回复
非常感谢，我找了一个早上了。。。。
sonicryu 2008-04-30
  • 打赏
  • 举报
 回复
不过还是要谢谢大家

请问怎么把下面这段代码，怎么把两次滚动之间的间距缩小

<div id=demo style="OVERFLOW: hidden; WIDTH: 760px; align: center">
<table cellspacing="0" cellpadding="0" align="center"
border="0">
<tr>
<td id="marquePic1" valign="top"><table width="958" height="130" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table id="DataList2" cellspacing="0" border="0" style="height:80px;width:688px;border-

collapse:collapse;">
<tr>
<td><a href='center.aspx?p_type=1'><img id="DataList2__ctl0_Image4" src="images\s2.jpg"

alt="" border="0" style="height:80px;width:120px;" /></a> </td>
<td><a href='center.aspx?p_type=2'><img id="DataList2__ctl1_Image4" src="images\s3.jpg"

alt="" border="0" style="height:80px;width:120px;" /></a> </td>
<td><a href='center.aspx?p_type=3'><img id="DataList2__ctl2_Image4" src="images\s4.jpg"

alt="" border="0" style="height:80px;width:120px;" /></a> </td>
<td><a href='center.aspx?p_type=4'><img id="DataList2__ctl3_Image4" src="images\s5.jpg"

alt="" border="0" style="height:80px;width:120px;" /></a> </td>
<td><a href='center.aspx?p_type=5'><img id="DataList2__ctl4_Image4" src="images\s1.jpg"

alt="" border="0" style="height:80px;width:120px;" /></a> </td>
</tr>
</table>
</tr>
</table></td>
<td id="marquePic2" valign="top"></td>
</tr>
</table>
</div>
<script type=text/javascript>
var speed=30
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0
}else{
demo.scrollLeft++
}}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
sonicryu 2008-04-30
  • 打赏
  • 举报
 回复
上面两位朋友的代码貌似无效，连静态的图片都无法滚动
_NET2004 2008-04-29
  • 打赏
  • 举报
 回复
非常感谢楼上的朋友，我也在找这样的东西
gui0605 2008-04-29
  • 打赏
  • 举报
 回复
datalist 也一样,用模版列即可
gui0605 2008-04-29
  • 打赏
  • 举报
 回复
<%@ Page language="c#" Codebehind="Link_V1.aspx.cs" AutoEventWireup="false" Inherits="jmw.Pages.Link.Link_V1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>LINK</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<LINK href="../../css/web_main.css" type="text/css" rel="stylesheet">
</HEAD>
<body MS_POSITIONING="FlowLayout">
<form id="Form1" method="post" runat="server">
<TABLE width="150" border="0" align="center" cellPadding="0" cellSpacing="0" id="Table1">
<TR>
<TD vAlign="bottom" align="center" height="5"></TD>
</TR>
<TR>
<TD vAlign="bottom" align="center">
<DIV id="demo" style="OVERFLOW: hidden; WIDTH:150px; COLOR: #ffffff; HEIGHT: 200px">
<DIV id="demo1">
<div align="center">
<TABLE id="Table2" cellSpacing="0" cellPadding="0" width="100%" border="0" align="center">
<asp:repeater id="Repeater_Link" runat="server">
<itemtemplate>
<tr>
<TD align="center" valign="middle">
<a href='<%# DataBinder.Eval(Container.DataItem, "url")%>' target=_blank><img alt='<%# DataBinder.Eval(Container.DataItem, "Name")%>' src='../../images/link/<%# DataBinder.Eval(Container.DataItem, "Pic")%>' border=0></a> 
</TD>
</tr>
</itemtemplate>
</asp:repeater>
</TABLE>
</div>
</DIV>
<DIV id="demo2"></DIV>
</DIV>
<div align="center">
<SCRIPT>
var speed=60
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>
</div>
</TD>
</TR>
</TABLE>
</form>
</body>
</HTML>
大自然D使者 2008-04-29
  • 打赏
  • 举报
 回复
用下面这种方式就可以实现：
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向上滚动
<div id="demo">
<div id="demo1">
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>
a11377815 2008-04-29
  • 打赏
  • 举报
 回复
怎么可能,datalist运行后也是HTML,JS肯定可以,自己多找找原因
Asp.net学生信息管理系统源码
<br> 充分利用了Asp.net2.0中的GridView、Datalist、SiteMap等新控件，数据库采用Sql2000，利用了存储过程 <br> 用户实现了超级管理员和普通用户的分级管理 默认管理员账号：lolo，密码beijing 该...
ASP.NET中利用DataList实现图片无缝滚动
<asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" DataSourceID="ObjectDataSource1"> <asp:ImageButton ID="imgbtnInfo" runat="server" ImageUrl='("Spic") %>' OnClick=...
ASP.NET DataList控件的了解与使用
ASP.NET DataList控件的了解与使用DataList控件概述使用DataList绑定数据源设计DataList控件模板 DataList控件概述 看了些帖子，有说到和Repeater控件类似，博主刚接触ASP.NET没多久，先学了DataList，还没接触过...
asp.net DataList实现显示商品信息和图片
实现效果如下，显示商品照片和商品名称 思路：前台弄8个datalist控件，后台获取最新的8条数据存入数据表中，将每行数据的id获取出来、获取对应的行、再将对应的行绑定在Datalist控件上。 在设计窗口选择编辑模板—...
asp.net中DataList的用法
DataList 控件在一个重复列表中显示数据项，并且还可以支持选择和编辑项目。可使用模板对 DataList 中列表项的内容和布局进行定义。每个 DataList 必须最少定义一个 ItemTemplate；但是，有好几个可选模板可用于定制...
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章