滚动新闻实现

使用marquee 绑定数据，显示新闻，但是实现的效果不是想要的。
我想要的是这样：滚动字幕从有向左滚动，每次只滚动显示一条新闻，新闻有多条，但是滚玩一条，滚下一条，如何实现。
现在的效果是：因为使用Repeater绑定数据，一下子把所有的新闻并排往左滚。
请高手指导！

解决方案 »

  1.   

    这个用marquee是不太好的，最好用js控制滚动，marquee太死板了。
      

  2.   

    首先，设置div  id=main  main宽度固定，溢出隐藏
          设置div  both     绝对定位。。宽度为所有新闻的宽度和 offset为负值
          
          其次将每个新闻 分别放到div中
          再将div放入both 并使div横向平铺.  此时控制 both的 offset 属性。 
             例： 点击按钮 是  将both 的offset属性值有负值慢慢增大，若offset=0 则将offset变为起始的负值
      

  3.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>单条滚动</title>
    <style type="text/css">
    <!--
    td {font-size:12px}
    .rollboder {BORDER: #bcbcbc 1px solid;}
    .rollleft {FLOAT: left; WIDTH: 240px}
    .rollleft STRONG {COLOR: #666}
    .rollcenter {BORDER-RIGHT: #bcbcbc 1px solid; BORDER-LEFT: #bcbcbc 1px solid; WIDTH: 30px; TEXT-ALIGN: center}
    .rollright {FLOAT: right; WIDTH: 40px; TEXT-ALIGN: center}
    .rollright IMG {VERTICAL-ALIGN: middle}
    -->
    </style>
    </head><body>
    <SCRIPT type=text/javascript>
    <!--
    var rollText_k=6; //菜单总数
    var rollText_i=1; //菜单默认值
    //setFocus1(0);
    rollText_tt=setInterval("rollText(1)",8000);
    function rollText(a){
    clearInterval(rollText_tt);
    rollText_tt=setInterval("rollText(1)",8000);
    rollText_i+=a;
    if (rollText_i>rollText_k){rollText_i=1;}
    if (rollText_i==0){rollText_i=rollText_k;}
    //alert(i)
     for (var j=1; j<=rollText_k; j++){
     document.getElementById("rollTextMenu"+j).style.display="none";
     }
     document.getElementById("rollTextMenu"+rollText_i).style.display="block";
     document.getElementById("pageShow").innerHTML = rollText_i+"/"+rollText_k;
    } 
    //-->
    </SCRIPT>
    <TABLE height="29" border="0" cellspacing="0" class=rollboder>
      <TBODY>
      <TR>
        <TD height="22" class=rollleft>
          <DIV class=rollTextMenus>
          <DIV id=rollTextMenu1 style="DISPLAY: block"><STRONG>　本站动态：</STRONG> <A 
          href="http://www.zcool.com.cn/lanren/vector/20070808/vector073615.shtml" target="_blank">矢量网页栏目标题</A></DIV>
          <DIV id=rollTextMenu2 style="DISPLAY: none"><STRONG>　本站动态：</STRONG> <A 
          href="http://www.zcool.com.cn/lanren/vector/20070807/vector191317.shtml" target="_blank">矢量律动条+箭头</A></DIV>
          <DIV id=rollTextMenu3 style="DISPLAY: none"><STRONG>　本站动态：</STRONG> <A 
          href="http://www.zcool.com.cn/lanren/vector/20070718/vector091158.shtml" target="_blank">2008年北京奥运会会徽矢量</A></DIV>
          <DIV id=rollTextMenu4 style="DISPLAY: none"><STRONG>　本站动态：</STRONG> <A 
          href="http://www.zcool.com.cn/lanren/vector/20070717/vector083943.shtml" target="_blank">2008北京奥运福娃AI矢量图</A></DIV>
          <DIV id=rollTextMenu5 style="DISPLAY: none"><STRONG>　本站动态：</STRONG> <A 
          href="http://www.zcool.com.cn/lanren/vector/20070613/vector175149.shtml" target="_blank">矢量AI格式的红色飘带</A></DIV>
          <DIV id=rollTextMenu6 style="DISPLAY: none"><STRONG>　本站动态：</STRONG> <A 
          href="http://www.zcool.com.cn/lanren/vector/20070605/vector085346.shtml" target="_blank">45个AI格式火矢量图</A></DIV></DIV></TD>
        <TD class=rollcenter id=pageShow>3/6</TD>
        <TD class=rollright><A title=上一条 href="javascript:rollText(-1);"><IMG src="images/last.gif" 
          alt=上一条 width="11" height="11" border="0"></A> <A title=下一条 href="javascript:rollText(1);"><IMG src="images/next.gif" 
          alt=下一条 width="11" height="11" border="0"></A></TD>
    </TR></TBODY></TABLE>
    </body>
    </html>