滚动资讯实现-ASP.NET教程-爱易网页

滚动资讯实现

日期：2014-05-17　浏览次数：20518 次

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

------解决方案--------------------

HTML code



<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=下一条

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

滚动资讯实现

相关资料更多>

推荐阅读更多>