Javascript定时执行——小挑战——高分求助！！

    我用如下代码来实现选项卡式浏览，我实现的功能是鼠标放在”选项卡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">&nbsp;</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>

解决方案 »

  1.   

    setInterval  和 clearInterval结合起来用就可以了。
      

  2.   

    <html><head>
    <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>
      

  3.   

    楼上的兄弟 dosomething(o,n)中的o好像没用到。不过方法可行，不错
      

  4.   

    这个o，是替LZ预留的，LZ原来的onmouseover事件需要用到，应该是改变样式之类