表格轮换显示强- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 表格轮换显示强

技术文章搜索

关键字

Javascript 中的表格轮换显示强

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 48 ::

收藏到网摘: n/a

Javascript调用XML制作连动下拉列表框超级强大的表单验证

点击运行可以看到效果:

<html>
<head>
</head>
<body>
<STYLE type=text/css>
.jx {FILTER: revealTrans(transition=13,duration=1); WIDTH: 100%; POSITION: absolute}
</STYLE>
<DIV class="jx" id=jx1 onmouseover=s(1) style="VISIBILITY: visible" onmouseout=s(0)> <TABLE width=768 height=130 border=1 align="center" cellPadding=3 cellSpacing=0 bordercolordark="#DAFEF2" bordercolorlight="#006600" bgColor=#D5FDE2> <TR bgcolor="#99CC33"> <TD height=10 colSpan=4 align=left vAlign=center> <P align=left><strong><a href="http://www.wfmeirong.com"><font color="#FFFFFF">1潍坊美容网窄告联盟</font></a> </strong></TD> </TR> <TR> <TD vAlign=center align=left width=195 height=10><a href="http://www.wfmeirong.com/gg/lanyue" target="_blank">潍坊蓝月摄影化妆美容专业学校</a> </TD> <TD vAlign=center align=left width=190 height=10> <a href="http://www.huameikj.com" target="_blank" alt="光子美容仪器，光子嫩肤仪器">潍坊华美电子有限公司</a></TD> <TD vAlign=center align=left width=195 height=10><a href="#" alt="未在本站认证">昌乐县人民医院医学美容中心 </a></TD> <TD vAlign=center align=left width=154 height=10><a href="#" alt="未在本站认证">真女人女子美容生活馆</a> </TD> </TR> </TABLE>
</DIV>
<DIV class="jx" id=jx2 onmouseover=s(1) style="VISIBILITY: hidden" onmouseout=s(0)>
<TABLE width=768 height=130 border=1 align="center" cellPadding=3 cellSpacing=0 bordercolorlight="#8D1294" bordercolordark="ffffff" bgColor=white> <TR bgcolor="#FFCEFF"> <TD height=10 colSpan=4 align=left vAlign=center> <P align=left><strong><a href="#">2潍坊美容网窄告联盟</a> </strong></TD> </TR> <TR> <TD vAlign=center align=left width=195 height=10><a href="http://www.wfmeirong.com/gg/lanyue" target="_blank">潍坊蓝月摄影化妆美容专业学校</a> </TD> <TD vAlign=center align=left width=190 height=10> <a href="http://www.huameikj.com" target="_blank" alt="光子美容仪器，光子嫩肤仪器">潍坊华美电子有限公司</a></TD> <TD vAlign=center align=left width=195 height=10><a href="#" alt="未在本站认证">昌乐县人民医院医学美容中心 </a></TD> <TD vAlign=center align=left width=154 height=10><a href="#" alt="未在本站认证">真女人女子美容生活馆</a> </TD> </TR>
</TABLE>
</DIV>
<DIV class="jx" id=jx3 onmouseover=s(1) style="VISIBILITY: hidden" onmouseout=s(0)>
<TABLE width=768 height=130 border=1 align="center" cellPadding=3 cellSpacing=0 bordercolorlight="#8D1294" bordercolordark="ffffff" bgColor=red> <TR bgcolor="#FFCEFF"> <TD height=10 colSpan=4 align=left vAlign=center> <P align=left><strong><a href="#">3潍坊美容网窄告联盟</a> </strong></TD> </TR> <TR> <TD vAlign=center align=left width=195 height=10><a href="http://www.wfmeirong.com/gg/lanyue" target="_blank">潍坊蓝月摄影化妆美容专业学校</a> </TD> <TD vAlign=center align=left width=190 height=10> <a href="http://www.huameikj.com" target="_blank" alt="光子美容仪器，光子嫩肤仪器">潍坊华美电子有限公司</a></TD> <TD vAlign=center align=left width=195 height=10><a href="#" alt="未在本站认证">昌乐县人民医院医学美容中心 </a></TD> <TD vAlign=center align=left width=154 height=10><a href="#" alt="未在本站认证">真女人女子美容生活馆</a> </TD> </TR>
</TABLE>
</DIV>
<DIV class="jx" id=jx4 onmouseover=s(1) style="VISIBILITY: hidden" onmouseout=s(0)>
<TABLE width=768 height=130 border=1 align="center" cellPadding=3 cellSpacing=0 bordercolorlight="#8D1294" bordercolordark="ffffff" bgColor=gray> <TR bgcolor="#FFCEFF"> <TD height=10 colSpan=4 align=left vAlign=center> <P align=left><strong><a href="#">4潍坊美容网窄告联盟</a> </strong></TD> </TR> <TR> <TD vAlign=center align=left width=195 height=10><a href="http://www.wfmeirong.com/gg/lanyue" target="_blank">潍坊蓝月摄影化妆美容专业学校</a> </TD> <TD vAlign=center align=left width=190 height=10> <a href="http://www.huameikj.com" target="_blank" alt="光子美容仪器，光子嫩肤仪器">潍坊华美电子有限公司</a></TD> <TD vAlign=center align=left width=195 height=10><a href="#" alt="未在本站认证">昌乐县人民医院医学美容中心 </a></TD> <TD vAlign=center align=left width=154 height=10><a href="#" alt="未在本站认证">真女人女子美容生活馆</a> </TD> </TR>
</TABLE>
</DIV>
<DIV class="jx" id=jx5 onmouseover=s(1) style="VISIBILITY: hidden" onmouseout=s(0)>
<TABLE width=768 height=130 border=1 align="center" cellPadding=3 cellSpacing=0 bordercolorlight="#8D1294" bordercolordark="ffffff" bgColor=yellow> <TR bgcolor="#FFCEFF"> <TD height=10 colSpan=4 align=left vAlign=center> <P align=left><strong><a href="#">5潍坊美容网窄告联盟</a> </strong></TD> </TR> <TR> <TD vAlign=center align=left width=195 height=10><a href="http://www.wfmeirong.com/gg/lanyue" target="_blank">潍坊蓝月摄影化妆美容专业学校</a> </TD> <TD vAlign=center align=left width=190 height=10> <a href="http://www.huameikj.com" target="_blank" alt="光子美容仪器，光子嫩肤仪器">潍坊华美电子有限公司</a></TD> <TD vAlign=center align=left width=195 height=10><a href="#" alt="未在本站认证">昌乐县人民医院医学美容中心 </a></TD> <TD vAlign=center align=left width=154 height=10><a href="#" alt="未在本站认证">真女人女子美容生活馆</a> </TD> </TR>
</TABLE>
</DIV>
<DIV class="jx" id=jx6 onmouseover=s(1) style="VISIBILITY: hidden" onmouseout=s(0)>
<TABLE width=768 height=130 border=1 align="center" cellPadding=3 cellSpacing=0 bordercolorlight="#8D1294" bordercolordark="ffffff" bgColor=green> <TR bgcolor="#FFCEFF"> <TD height=10 colSpan=4 align=left vAlign=center> <P align=left><strong><a href="#">6潍坊美容网窄告联盟</a> </strong></TD> </TR> <TR> <TD vAlign=center align=left width=195 height=10><a href="http://www.wfmeirong.com/gg/lanyue" target="_blank">潍坊蓝月摄影化妆美容专业学校</a> </TD> <TD vAlign=center align=left width=190 height=10> <a href="http://www.huameikj.com" target="_blank" alt="光子美容仪器，光子嫩肤仪器">潍坊华美电子有限公司</a></TD> <TD vAlign=center align=left width=195 height=10><a href="#" alt="未在本站认证">昌乐县人民医院医学美容中心 </a></TD> <TD vAlign=center align=left width=154 height=10><a href="#" alt="未在本站认证">真女人女子美容生活馆</a> </TD> </TR>
</TABLE>
</DIV>
<SCRIPT language="javascript">
var jx=new Array();
var cnt=6;//div总数
for (var i=0;i<cnt;i++){ jx[i]=document.getElementById("jx"+(i+1));
}
//var jx1=document.getElementById("jx1");
//var jx2=document.getElementById("jx2");
//设置显示哪个层的变量
var sL=1;
//设置动与不动的变量
var iS=0;
//设定显示时间
function p()
{
if(iS==0)
{
sL=sL%cnt;
for (var i=0;i<cnt;i++){ if (i==sL) cs1(jx[i],1); else cs1(jx[i],0);
}
setTimeout(p,4000);
sL++;//以上两个时间的设置必须一样
}
else
{setTimeout(p,1000);}
}
//显示函数
function cs1(a,b)
{if(a==null)return; a.filters.revealTrans.apply(); if(b==1) a.style.visibility="visible"; else a.style.visibility="hidden"; a.filters.revealTrans.play();}
//设定is变量
function s(v)
{iS=v;}
p();
</SCRIPT>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Javascript调用XML制作连动下拉列表框超级强大的表单验证

Javascript 中的 表格轮换显示 强

评论 (0) All

Javascript 中的表格轮换显示强