有一个动态输出的表格单元格,里面的值是:
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.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>标签可以实现)
请问:那种轮换的效果怎么实现?最好有代码片段....
<!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>
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>