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

请教高手  我在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> 输出的图片无效

解决方案 »

  1.   

    怎么可能,datalist运行后也是HTML,JS肯定可以,自己多找找原因
      

  2.   

    用下面这种方式就可以实现： 
        <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>
      

  3.   

    <%@ 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>&nbsp;
    </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>
      

  4.   

    datalist 也一样,用模版列即可
      

  5.   

    不过还是要谢谢大家请问怎么把下面这段代码，怎么把两次滚动之间的间距缩小<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>