我用如下代码来实现选项卡式浏览,我实现的功能是鼠标放在”选项卡01“上时显示div11
,放在”选项卡02“上时显示div02。到这的话,功能很好实现,我要进一步实现的是不进行任何操作时,页面以固定时间间隔自动进行两个选项卡的切换,一旦鼠标放到其中一个选项卡就停止自动切换,鼠标离开后一定时间再进行自动切换,高分求助,谢谢!!
<table width="715" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="7" align="center" valign="middle" class="index_bzdt03"></td>
<td id="M21" width="87" align="center" valign="middle" class="index_bzdt04" onmouseover="changebgM2(this);showDiv(11)">选项卡01</td>
<td id="M22" width="87" align="center" valign="middle" class="index_bzdt01" onmouseover="changebgM2(this);showDiv(12)">选项卡02</td>
<td width="12" align="center" valign="middle" class="index_bzdt02"> </td>
</tr>
<tr>
<td height="173" colspan="10" class="index_bzdt05">
<div id="div11">
<table width="703" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="274" align="left" class="index_bzdt06">·11111111111有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
<td rowspan="7" width="15"></td>
<td width="274" align="left" class="index_bzdt06">·超导量子计算机有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
</tr>
<tr>
<td align="left" class="index_bzdt06">·超导量子计算机有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
<td align="left" class="index_bzdt06">·超导量子计算机有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
</tr>
</table></div>
<div id="12" style="display:none">
<table width="703" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="274" align="left" class="index_bzdt06">·12121212121212个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
<td rowspan="7" width="15"></td>
<td width="274" align="left" class="index_bzdt06">·超导量子计算机有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
</tr>
<tr>
<td align="left" class="index_bzdt06">·超导量子计算机有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
<td align="left" class="index_bzdt06">·超导量子计算机有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
</tr>
</table></div>
</td>
</tr>
</table>
,放在”选项卡02“上时显示div02。到这的话,功能很好实现,我要进一步实现的是不进行任何操作时,页面以固定时间间隔自动进行两个选项卡的切换,一旦鼠标放到其中一个选项卡就停止自动切换,鼠标离开后一定时间再进行自动切换,高分求助,谢谢!!
<table width="715" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="7" align="center" valign="middle" class="index_bzdt03"></td>
<td id="M21" width="87" align="center" valign="middle" class="index_bzdt04" onmouseover="changebgM2(this);showDiv(11)">选项卡01</td>
<td id="M22" width="87" align="center" valign="middle" class="index_bzdt01" onmouseover="changebgM2(this);showDiv(12)">选项卡02</td>
<td width="12" align="center" valign="middle" class="index_bzdt02"> </td>
</tr>
<tr>
<td height="173" colspan="10" class="index_bzdt05">
<div id="div11">
<table width="703" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="274" align="left" class="index_bzdt06">·11111111111有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
<td rowspan="7" width="15"></td>
<td width="274" align="left" class="index_bzdt06">·超导量子计算机有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
</tr>
<tr>
<td align="left" class="index_bzdt06">·超导量子计算机有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
<td align="left" class="index_bzdt06">·超导量子计算机有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
</tr>
</table></div>
<div id="12" style="display:none">
<table width="703" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="274" align="left" class="index_bzdt06">·12121212121212个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
<td rowspan="7" width="15"></td>
<td width="274" align="left" class="index_bzdt06">·超导量子计算机有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
</tr>
<tr>
<td align="left" class="index_bzdt06">·超导量子计算机有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
<td align="left" class="index_bzdt06">·超导量子计算机有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
</tr>
</table></div>
</td>
</tr>
</table>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<script>
var flag = true;//是否自动切换
var witch = 0;//0表示第一个,1表示第二个
function dosomething(o,n){
//changebgM2(o);
showDiv(n);
flag = false;
}
function mouseout(){
flag = true;
}
function showDiv(n){
document.getElementById("div"+n).style.display = "block";
var m = 11;
if(n==11){
m = 12;
}
document.getElementById("div"+m).style.display = "none";
}
function auto(){
if(flag){
var m = 11;
var xx = "M21";
if(witch == 1){
m = 12;
xx = "M22";
}
var o = document.getElementById(xx);
dosomething(o,m);
flag = true;
witch = witch==0?1:0;
}
}
window.setInterval("auto()",1000);
</script>
</head><body>
<table width="715" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="7" align="center" valign="middle" class="index_bzdt03"></td>
<td id="M21" width="87" align="center" valign="middle" class="index_bzdt04" onmouseover="dosomething(this,11)" onmouseout="mouseout()">选项卡01</td>
<td id="M22" width="87" align="center" valign="middle" class="index_bzdt01" onmouseover="dosomething(this,12)" onmouseout="mouseout()">选项卡02</td>
<td width="12" align="center" valign="middle" class="index_bzdt02"> </td>
</tr>
<tr>
<td height="173" colspan="10" class="index_bzdt05">
<div id="div11">
<table width="703" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="274" align="left" class="index_bzdt06">·11111111111有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
<td rowspan="7" width="15"></td>
<td width="274" align="left" class="index_bzdt06">·超导量子计算机有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
</tr>
<tr>
<td align="left" class="index_bzdt06">·超导量子计算机有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
<td align="left" class="index_bzdt06">·超导量子计算机有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
</tr>
</table></div>
<div id="div12" style="display:none">
<table width="703" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="274" align="left" class="index_bzdt06">·12121212121212个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
<td rowspan="7" width="15"></td>
<td width="274" align="left" class="index_bzdt06">·超导量子计算机有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
</tr>
<tr>
<td align="left" class="index_bzdt06">·超导量子计算机有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
<td align="left" class="index_bzdt06">·超导量子计算机有了首个“光电开关”</td>
<td width="70" align="center" class="index_bzdt06">[2010-5-5]</td>
</tr>
</table></div>
</td>
</tr>
</table>
</body></html>