有一个动态输出的表格单元格,里面的值是:
1.00----2.20
 www--eee
2.44----4.20(空的地方用"-----"隔开)这个单元格里面大概的意思就是 :1.0 和 2.44 所对应的值是“www”
                             :2.20和 4.20 所对应的值是“eee”我现在所要达到的效果是 :“www”和“eee”不能同时显示 要隔开显示,
                          也就是说开始显示“半球”几秒钟后显示“一球”
                          几秒钟后有重复 就是那种轮换的效果...1.00----2.20
 半球--一球
2.44----4.20  (这个在单元格中用<span>标签可以实现)
请问:那种轮换的效果怎么实现?最好有代码片段....

解决方案 »

  1.   


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <style type="text/css" media="all">
    body{background-color:#262626;}
    .div{width:363px;line-height:26px;font-size:12px;height:auto;overflow:hidden;color:#727272;background-image:url(http://www.wxwdesign.cn/works/slide_txt_bg.jpg);height:24px;}
    .div ul{display:none;}
    .div2{width:0px;white-space:nowrap;overflow:hidden;float:left;}
    .div2 a:link,.div2 a:visited{color:#125B7E;text-decoration:none;}
    .div2 a:hover{color:#BF320F;text-decoration:none;}
    .left,.right{margin:0px 6px;float:left;width:7px;height:22px;overflow:hidden;cursor:pointer;}
    .right{float:right;}
    .c1{color:#D10303}
    </style>
    <script language="javascript" type="text/javascript">
    /*
    power by:http://www.wxwdesign.cn
    */
    function getTag(tag){return document.getElementsByTagName(tag)};
    //主函数
    function slidetext(){
    var li=getTag("li");
    var container=getTag("div")[0];
    var div=document.createElement("div");
    var left=document.createElement("div");
    var right=document.createElement("div");
    var i=0,j=0,timer,timer2,temp=0;
    var interv=5000; //文字切换的时间间隔
    var interv2=10; //文字显示的速度
    var w_t=300;  //文字的宽度
    left.className="left";
    left.title="上一个"; //左边按钮提示文字
    right.title="下一个"; //右边按钮提示文字
    left.onclick=function(){q(-1)};
    right.onclick=function(){q(1)};
    right.className="right";
    container.removeChild(container.firstChild);
    container.appendChild(left);
    div.className="div2";
    container.appendChild(div);
    container.appendChild(right);
    var s=function(){i+=2;div.style.width=i+"px";div.innerHTML=(j+1)+". "+li[j].innerHTML;temp=j;if(i<w_t){timer2=setTimeout(s,interv2)}else{timer=setTimeout(s,interv);if(j<(li.length-1)){j++;}else{j=0};i=0;}}
    var q=function(n){clearTimeout(timer2);clearTimeout(timer);j=temp;if(n<0){if(j>0){j--}else{j=li.length-1}}else{if(j<(li.length-1)){j++;}else{j=0}};i=0;s()}
    s();
    }
    //初始化
    window.onload=slidetext;
    </script>
    <title>文字轮换效果</title>
    </head><body>
    <div class="div"><div class="div2">Loading...</div>
    <ul>
    <li><a href="http://www.wxwdesign.cn/article/280.htm" target="_blank">window.onload同时执行多个函数的解决方法</a></li>
    <li><a href="http://www.wxwdesign.cn/article/279.htm" target="_blank">评估一下你的网站值多少钱(比比看网站估价)</a></li>
    <li>分享两款JavaScript版本的音乐播放器(带歌词)</li>
    <li><span class="c1">一些CSS3标签选择器对照表</span></li>
    </ul>
    </div>
    </body>
    </html>
      

  2.   

    setTimeout或setInterval都可以
    setTimeout
    <script language="javascript" type="text/javascript">
    function marqueeWin(span,marqueeSet,setIndex)
    {
        span.innerText = marqueeSet[setIndex];
        if(setIndex==marqueeSet.length-1){
            setIndex=0;
        }else{
            ++setIndex;
        }
        setTimeout(function(){
            marqueeWin(span,marqueeSet,setIndex);}
        ,2000);//2秒
        
    }
    window.onload=function(){   var marqueeSet = ["半球","一球"];
       var span = document.getElementById("sp1");
       marqueeWin(span,marqueeSet,0);
        
    }
    </script>
    <span id="sp1">半球</span>
    setInterval
    window.onload=function(){
       var marqueeSet = ["半球","一球"];
       var span = document.getElementById("sp1");
       var setIndex = 1;
        setInterval(function(){
            span.innerText = marqueeSet[setIndex];
            if(setIndex==marqueeSet.length-1){
                setIndex=0;
            }else{
                ++setIndex;
            }
        },2000);//2秒
    }
    </script>
    <span id="sp1">半球</span>