一个简单的js定时切换选项卡问题

以下代码是一个鼠标经过就能切换选项卡的程序，我现在要在这个功能基础上，实现定时自动切换，请牛人帮忙改下，谢谢

程序如下：

<script>
function ShowLayers(n,m)
{ 
 for(i=1;i<=m;i++)
 {
  eval("content" + i).style.display="none";
  eval("title"+i+".style.background=\"ffffff\";");
 }
 eval("title"+n+".style.background=\"cccccc\";");
 eval("content" + n).style.display="";
}
</script>
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="ffffff">
  <tr>
    <td height="20" id="title1" bgcolor="#cccccc"><a onmouseover="javascript:ShowLayers(1,5);">标题1</a></td>
    <td id="title2"><a onmouseover="javascript:ShowLayers(2,5);">标题2</a></td>
    <td id="title3"><a onmouseover="javascript:ShowLayers(3,5);">标题3</a></td>
    <td id="title4"><a onmouseover="javascript:ShowLayers(4,5);">标题4</a></td>
    <td id="title5"><a onmouseover="javascript:ShowLayers(5,5);">标题5</a></td>
  </tr>
  <tr>
    <td height="100" colspan="5" bgcolor="cccccc">
 <div  id="content1" style="display:;">
 内容1 
 </div>
 <div  id="content2" style="display:none;">
 内容2 
 </div>
 <div  id="content3" style="display:none;">
 内容3 
 </div>
 <div  id="content4" style="display:none;">
 内容4 
 </div>
 <div  id="content5" style="display:none;">
 内容5 
 </div>
 </td>
  </tr>
</table>

13 个解决方案

#1

在页面的最后加上

<script>
var k=0;
window.setInterval(function(){ShowLayers(++k,5);if(k>=5)k=0},3000);
</script>

即可

#2

标准的写法

<script>
function ShowLayers(n,m)
{ 
 for(i=1;i<=m;i++)
 {
  document.getElementById("content" + i).style.display="none";
  document.getElementById("title"+i).style.backgroundColor="#ffffff";
 }
 document.getElementById("title"+n).style.backgroundColor="#cccccc";
 document.getElementById("content" + n).style.display="";
}
</script>
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="ffffff">
  <tr>
    <td height="20" id="title1" bgcolor="#cccccc"><a onmouseover="javascript:ShowLayers(1,5);">标题1</a></td>
    <td id="title2"><a onmouseover="javascript:ShowLayers(2,5);">标题2</a></td>
    <td id="title3"><a onmouseover="javascript:ShowLayers(3,5);">标题3</a></td>
    <td id="title4"><a onmouseover="javascript:ShowLayers(4,5);">标题4</a></td>
    <td id="title5"><a onmouseover="javascript:ShowLayers(5,5);">标题5</a></td>
  </tr>
  <tr>
    <td height="100" colspan="5" bgcolor="cccccc">
 <div  id="content1" style="display:;">
 内容1 
 </div>
 <div  id="content2" style="display:none;">
 内容2 
 </div>
 <div  id="content3" style="display:none;">
 内容3 
 </div>
 <div  id="content4" style="display:none;">
 内容4 
 </div>
 <div  id="content5" style="display:none;">
 内容5 
 </div>
 </td>
  </tr>
</table>

<script>
var k=0;
window.setInterval(function(){ShowLayers(++k,5);if(k>=5)k=0},2000);
</script>

#3

好难。。。。。。。。。。。。

#4

    <script language="javascript" type="text/javascript">
        var n = 0;
        function ShowLayers(n, m) {
            for (i = 1; i <= m; i++) {
                eval("content" + i).style.display = "none";
                eval("title" + i + ".style.background=\"ffffff\";");
            }
            eval("title" + n + ".style.background=\"cccccc\";");
            eval("content" + n).style.display = "";
        }
        window.setInterval(function () { ShowLayers(++n, 5); if (n >= 5) n = 0 }, 1000);
    </script>
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="ffffff">
        <tr>
            <td height="20" id="title1" bgcolor="#cccccc">
                <a onmouseover="javascript:ShowLayers(1,5);">标题1</a>
            </td>
            <td id="title2">
                <a onmouseover="javascript:ShowLayers(2,5);">标题2</a>
            </td>
            <td id="title3">
                <a onmouseover="javascript:ShowLayers(3,5);">标题3</a>
            </td>
            <td id="title4">
                <a onmouseover="javascript:ShowLayers(4,5);">标题4</a>
            </td>
            <td id="title5">
                <a onmouseover="javascript:ShowLayers(5,5);">标题5</a>
            </td>
        </tr>
        <tr>
            <td height="100" colspan="5" bgcolor="cccccc">
                <div id="content1" style="display: ;">
                    内容1
                </div>
                <div id="content2" style="display: none;">
                    内容2
                </div>
                <div id="content3" style="display: none;">
                    内容3
                </div>
                <div id="content4" style="display: none;">
                    内容4
                </div>
                <div id="content5" style="display: none;">
                    内容5
                </div>
            </td>
        </tr>
    </table>

#5

http://myzhijie.javaeye.com/blog/647270  可以上这里看看  别着急 慢慢来···

#6

<!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=utf-8" />
<title>JavaScript滚动</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">			
	var count = 1;
	window.onload = function(){
		setInterval('ShowLayers(5)',3000);
	}
function ShowLayers(n,m)	{ 
	if(arguments.length == 1) {
		m = n;
		n = count;
		count = (count%5) + 1;
	}
 	for(i=1;i<=m;i++)	{
		document.getElementById("content" + i).style.display="none";
		document.getElementById("title"+i).style.background="ffffff";
	}
	document.getElementById("title"+n).style.background="cccccc";
   	document.getElementById("content" + n).style.display="block";
}
</script>

</head>
<body>

<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="ffffff">
  <tr>
    <td height="20" id="title1" bgcolor="#cccccc"><a onmouseover="javascript:ShowLayers(1,5);">标题1</a></td>
    <td id="title2"><a onmouseover="javascript:ShowLayers(2,5);">标题2</a></td>
    <td id="title3"><a onmouseover="javascript:ShowLayers(3,5);">标题3</a></td>
    <td id="title4"><a onmouseover="javascript:ShowLayers(4,5);">标题4</a></td>
    <td id="title5"><a onmouseover="javascript:ShowLayers(5,5);">标题5</a></td>
  </tr>
  <tr>
    <td height="100" colspan="5" bgcolor="cccccc">
 <div  id="content1" style="display:block;">
 内容1 
 </div>
 <div  id="content2" style="display:none;">
 内容2 
 </div>
 <div  id="content3" style="display:none;">
 内容3 
 </div>
 <div  id="content4" style="display:none;">
 内容4 
 </div>
 <div  id="content5" style="display:none;">
 内容5 
 </div>
 </td>
  </tr>
</table>
</body>
</html>

#7

根据前面几位的代码，我改写了一下，尽可能让JS代码和HTML分开！
<html>
<body>
//以下为：JS代码部分
<script>
window.onload=function(){
   var aa=document.getElementById("td").getElementsByTagName("a");
   for (var j=1;j<aa.length+1;j++ )
   {
     aa.onmouseover=ShowLayers(j,aa.length);
   }
   var k=0;
window.setInterval(function(){ShowLayers(++k,5);if(k>=5)k=0},2000);
}
function ShowLayers(n,m)
{ 
 for(i=1;i<=m;i++)
 {
  document.getElementById("content" + i).style.display="none";
  document.getElementById("title"+i).style.backgroundColor="#ffffff";
 }
 document.getElementById("title"+n).style.backgroundColor="#cccccc";
 document.getElementById("content" + n).style.display="";
}
</script>
//以下为：HTML部分
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="ffffff" id="td">
  <tr>
    <td height="20" id="title1" bgcolor="#cccccc"><a>标题1</a></td>
    <td id="title2"><a>标题2</a></td>
    <td id="title3"><a>标题3</a></td>
    <td id="title4"><a>标题4</a></td>
    <td id="title5"><a>标题5</a></td>
  </tr>
  <tr>
    <td height="100" colspan="5" bgcolor="cccccc">
 <div  id="content1" style="display:;">
 内容1 
 </div>
 <div  id="content2" style="display:none;">
 内容2 
 </div>
 <div  id="content3" style="display:none;">
 内容3 
 </div>
 <div  id="content4" style="display:none;">
 内容4 
 </div>
 <div  id="content5" style="display:none;">
 内容5 
 </div>
 </td>
  </tr>
</table>
</body>
</html>

#8

这代码你测试过吗

引用 7 楼 falizixun2 的回复:

根据前面几位的代码，我改写了一下，尽可能让JS代码和HTML分开！
<html>
<body>
//以下为：JS代码部分
<script>
window.onload=function(){
   var aa=document.getElementById("td").getElementsByTagName("a");
   for (var j=1;j<aa.length+1……

#9

引用 8 楼 cj205 的回复:

这代码你测试过吗
引用 7 楼 falizixun2 的回复:

根据前面几位的代码，我改写了一下，尽可能让JS代码和HTML分开！
<html>
<body>
//以下为：JS代码部分
<script>
window.onload=function(){
var aa=document.getElementById("td").getElementsByTagName("a"……

绝对测试过，如果我乱发代码，我早被骂死了。而且为了防止有人说没效果，我IE6和FF全都试过了。可惜楼主一分都不给我！明显欺负我这个小号嘛！无语！当然分是他自己的，他爱给谁是他的权利，我管不着，但是我辛苦的改了代码，不给分也就算了，还被怀疑是否测试过，心里真的难受！

#10

引用 8 楼 cj205 的回复:

这代码你测试过吗
引用 7 楼 falizixun2 的回复:

根据前面几位的代码，我改写了一下，尽可能让JS代码和HTML分开！
<html>
<body>
//以下为：JS代码部分
<script>
window.onload=function(){
var aa=document.getElementById("td").getElementsByTagName("a"……

   版主啊，不知道你是不是太忙了，看看这个帖子：http://topic.csdn.net/u/20101231/11/81e24c51-e173-4beb-825a-7087fe368447.html，我从晚上10点测试到凌晨12点，你发的那个测试在FF下通不过，是否测试过代码这话应该我来问你才对！不信你自己看看那个帖子！我知道你肯定是因为太忙了。没有时间认真去测试！

#11

版主啊，请问下如果在同一个页面下需要实现多个这样的效果，请问下改如何实现，
我才疏学浅，修改了一些，但是第一个是按照循序走，其他的是跳着走
第一个效果是按照1-2-3-4-5
第二个和第三第四都不定1-3-2-4-5-3我看了多次是这样

<!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=gb2312" />
<title>无标题文档</title>
</head>
<script>
function hua01(n,m)
{ 
 for(i=1;i<=m;i++)
 {
  document.getElementById("Ca" + i).style.display="none";
  document.getElementById("a"+i).style.backgroundColor="#ffffff";/*className="select1"*/
 }
 document.getElementById("a"+n).style.backgroundColor="#cccccc";
 document.getElementById("Ca" + n).style.display="";
}
</script>
<div style=" width:500px; margin:0 auto;">
    <li id="a1" style="background:#ccc"><a onmouseover="javascript:hua01(1,5);">标题1</a></li>
    <li id="a2"><a onmouseover="javascript:hua01(2,5);">标题2</a></li>
    <li id="a3"><a onmouseover="javascript:hua01(3,5);">标题3</a></li>
    <li id="a4"><a onmouseover="javascript:hua01(4,5);">标题4</a></li>
    <li id="a5"><a onmouseover="javascript:hua01(5,5);">标题5</a></li>
</div>
<div style="width:500px; height:100px; margin:0 auto">
   <div  id="Ca1" style="display:;">内容1 </div>
  <div  id="Ca2" style="display:none;">
 内容2 
 </div>
 <div  id="Ca3" style="display:none;">
 内容3 
 </div>
 <div  id="Ca4" style="display:none;">
 内容4 
 </div>
 <div  id="Ca5" style="display:none;">
 内容5 
 </div>
</div>

<script>
var k=0;
window.setInterval(function(){hua01(++k,5);if(k>=5)k=0},2000);
</script>
第二个和第N个

<script>
function hua02(n,m)
{ 
 for(i=1;i<=m;i++)
 {
  document.getElementById("Cb" + i).style.display="none";
  document.getElementById("b"+i).style.backgroundColor="#ffffff";/*className="select1"*/
 }
 document.getElementById("b"+n).style.backgroundColor="#cccccc";
 document.getElementById("Cb" + n).style.display="";
}
</script>
<div style=" width:500px; margin:0 auto;">
    <li id="b1" style="background:#ccc"><a onmouseover="javascript:hua02(1,5);">标题1</a></li>
    <li id="b2"><a onmouseover="javascript:hua02(2,5);">标题2</a></li>
    <li id="b3"><a onmouseover="javascript:hua02(3,5);">标题3</a></li>
    <li id="b4"><a onmouseover="javascript:hua02(4,5);">标题4</a></li>
    <li id="b5"><a onmouseover="javascript:hua02(5,5);">标题5</a></li>
</div>
<div style="width:500px; height:100px; margin:0 auto">
   <div  id="Cb1" style="display:;">内容1 </div>
  <div  id="Cb2" style="display:none;">
 内容2 
 </div>
 <div  id="Cb3" style="display:none;">
 内容3 
 </div>
 <div  id="Cb4" style="display:none;">
 内容4 
 </div>
 <div  id="Cb5" style="display:none;">
 内容5 
 </div>
</div>

<script>
var k=0;
window.setInterval(function(){hua02(++k,5);if(k>=5)k=0},2000);
</script>





33
<script>
function hua03(n,m)
{ 
 for(i=1;i<=m;i++)
 {
  document.getElementById("Cc" + i).style.display="none";
  document.getElementById("c"+i).style.backgroundColor="#ffffff";/*className="select1"*/
 }
 document.getElementById("c"+n).style.backgroundColor="#cccccc";
 document.getElementById("Cc" + n).style.display="";
}
</script>
<div style=" width:500px; margin:0 auto;">
    <li id="c1" style="background:#ccc"><a onmouseover="javascript:hua03(1,5);">标题1</a></li>
    <li id="c2"><a onmouseover="javascript:hua03(2,5);">标题2</a></li>
    <li id="c3"><a onmouseover="javascript:hua03(3,5);">标题3</a></li>
    <li id="c4"><a onmouseover="javascript:hua03(4,5);">标题4</a></li>
    <li id="c5"><a onmouseover="javascript:hua03(5,5);">标题5</a></li>
</div>
<div style="width:500px; height:100px; margin:0 auto">
   <div  id="Cc1" style="display:;">内容1 </div>
  <div  id="Cc2" style="display:none;">
 内容2 
 </div>
 <div  id="Cc3" style="display:none;">
 内容3 
 </div>
 <div  id="Cc4" style="display:none;">
 内容4 
 </div>
 <div  id="Cc5" style="display:none;">
 内容5 
 </div>
</div>

<script>
var k=0;
window.setInterval(function(){hua03(++k,5);if(k>=5)k=0},2000);
</script>

</body>
</html>

#12

发完帖子，自己寻思着在定时器的问题上，结果还真是这样

<script>
var k=0;
window.setInterval(function(){hua01(++k,5);if(k>=5)k=0},2000);
</script>
<script>
var kk=0;
window.setInterval(function(){hua02(++kk,5);if(kk>=5)kk=0},2000);
</script>
<script>
var kkk=0;
window.setInterval(function(){hua03(++kkk,5);if(kkk>=5)kkk=0},2000);
</script>

#13

还别说们这样发布上去就OK了，就正常了，呵呵