求高人帮助,写一个JavaScript特效...

有N个表格,在一个Div里,每隔2秒循环显示其中的2个表格,比如第一次显示table1和table2,两秒后显示table2和table3,然后是table3和table4.....直到tableN和table1后循环!
这样的效果,怎么做?

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

你想怎么个循环法？比如 table1 table2 ，有什么特殊标志么？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>ti</title>
<script>
var startIndex=1;
var endIndex=7;
function showTable(e)
{

if(startIndex<=endIndex)
{
eval("document.all." + e).style.display="";
var t="t" + startIndex.toString();
var f="showTable('"+ t + "')"
startIndex=startIndex +1;
setTimeout(f,2000);
}
}</script>
</head><body onLoad="showTable('t1')">
<div>
<table width="461" border="1" style="display:none "  id="t1">
<tr>
    <td width="30%">title1</td>
<td width="30%">title2</td>
<td width="40%">title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
<table width="461" border="1" style="display:none "  id="t2">
<tr>
    <td width="30%">title1</td>
<td width="30%">title2</td>
<td width="40%">title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
<table width="461" border="1" style="display:none "  id="t3">
<tr>
    <td width="30%">title1</td>
<td width="30%">title2</td>
<td width="40%">title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
<table width="461" border="1" style="display:none "  id="t4">
<tr>
    <td width="30%">title1</td>
<td width="30%">title2</td>
<td width="40%">title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
<table width="461" border="1" style="display:none "  id="t5">
<tr>
    <td width="30%">title1</td>
<td width="30%">title2</td>
<td width="40%">title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
<table width="461" border="1" style="display:none "  id="t6">
<tr>
    <td width="30%">title1</td>
<td width="30%">title2</td>
<td width="40%">title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
</div>
</body>
</html>
上面的错了，随手写的，没注意
下面的是显示两个。
代码不好，最好的，就是定义一个数组，里面放table的id，你要循环也好，随即也好，
只要决定数组的index，两个，就可以了，呵呵
——————————————————————————————<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>ti</title>
<script>
var startIndex=1;
var endIndex=7;
function showTable(e1,e2)
{

if(startIndex<endIndex)
{
for(var i=1;i<endIndex;i++)
{
eval("document.all.t" + i).style.display="none";
}
eval("document.all." + e1).style.display="";
var el=eval("document.all." + e2);

if(el !=null)
{
eval("document.all." + e2).style.display="";
}

var t="t" + startIndex.toString();
var t2="t" + (startIndex+1);
var f="showTable('"+ t + "','" + t2 + "')"
startIndex=startIndex +1;
setTimeout(f,2000);
}
}</script>
</head><body onLoad="showTable('t1','t2')">
<div>
<table width="461" border="1" style="display:none "  id="t1">
<tr>
    <td width="30%">Table1.title1</td>
<td width="30%">Table1.title2</td>
<td width="40%">Table1.title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
<table width="461" border="1" style="display:none "  id="t2">
<tr>
    <td width="30%">Table2.title1</td>
<td width="30%">Table2.title2</td>
<td width="40%">Table2.title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
<table width="461" border="1" style="display:none "  id="t3">
<tr>
    <td width="30%">Table3.title1</td>
<td width="30%">Table1.title2</td>
<td width="40%">Table1.title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
<table width="461" border="1" style="display:none "  id="t4">
<tr>
    <td width="30%">Table4.title1</td>
<td width="30%">title2</td>
<td width="40%">title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
<table width="461" border="1" style="display:none "  id="t5">
<tr>
    <td width="30%">Table5.title1</td>
<td width="30%">title2</td>
<td width="40%">title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
<table width="461" border="1" style="display:none "  id="t6">
<tr>
    <td width="30%">Table6.title1</td>
<td width="30%">title2</td>
<td width="40%">title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
</div>
</body>
</html>
我来送一个 : )
--------------------------------
<body>
<style>
table
{
width:100px;border:1p solid #666666;background-color:#cecfff;font:12px verdana;margin:2px 0px;
}
</style>
<div id="container">
<table><tr><td>(1) ASP.net</td></tr></table>
<table><tr><td>(2) VC++</td></tr></table>
<table><tr><td>(3) VC#.net</td></tr></table>
<table><tr><td>(4) VB.net</td></tr></table>
<table><tr><td>(5) Java</td></tr></table>
</div>
<script>
var tq ={     pos : -1,
     ts : null,     start : function()
     {
        for(var i = 0; i < this.ts.length; i++)
             this.ts[i].style.display = "none";        for(var i = 0; i < 2; i++)
        {
    var n = this.next();
    n.parentNode.appendChild(n);
            n.style.display = "";
} setTimeout("tq.start()", 2000);
     },     next : function()
     {
          if(this.ts.length > 0)
          {
               this.pos = ++ this.pos % this.ts.length;
               return this.ts[this.pos];
           }
          return null;
     },     init : function(con)
     {
          this.ts = new Array();
          for(var i = 0, j = con.childNodes.length; i < j; i++)
               if(con.childNodes[i].nodeName.toLowerCase() == "table")
                     this.ts[this.ts.length] = con.childNodes[i];
     }
}//调用
tq.init(document.getElementById("container"));
tq.start();
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>ti</title>
<script type="text/javascript">
var startIndex=0;
var endIndex=7;
var myArrayName = new Array('t1','t2','t3','t4','t5','t6','t7');
function showTable()
{
var tableShow=new Array();

if(startIndex>endIndex-2)
{
startIndex=0;
}
for(var i=0;i<endIndex;i++)
{
if(startIndex ==i || startIndex+1 ==i)
{
eval("document.all." + myArrayName[i]).style.display="";
}
else
{
eval("document.all." + myArrayName[i]).style.display="none";
}
}
startIndex=startIndex +1;
setTimeout("showTable()",2000);

}
function showtableRandowm()
{
var r=Math.random(1)*(endIndex-1);
var index=Math.ceil(r);
for(var i=0;i<myArrayName.length;i++)
{
eval("document.all." + myArrayName[i]).style.display="none";
}
if(index==myArrayName.length-1)
{
eval("document.all." + myArrayName[index]).style.display="";
eval("document.all." + myArrayName[index-1]).style.display="";
}
else
{
eval("document.all." + myArrayName[index]).style.display="";
eval("document.all." + myArrayName[index+1]).style.display="";
}
setTimeout("showtableRandowm()",2000);
}
function show()
{
var e=document.all.showType;
if(e[0].checked)
{
showTable();
}
else
{
showtableRandowm();
}
}
</script>
</head><body>
<input type="radio" name="showType" value="Order">Order<input type="radio" value="Random" name="showType">Random<br>
<input type="button" value="OK" onClick="show()">
<div>
<table width="461" border="1" style="display:none "  id="t1">
<tr>
    <td width="30%">Table1.title1</td>
<td width="30%">Table1.title2</td>
<td width="40%">Table1.title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
<table width="461" border="1" style="display:none "  id="t2">
<tr>
    <td width="30%">Table2.title1</td>
<td width="30%">Table2.title2</td>
<td width="40%">Table2.title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
<table width="461" border="1" style="display:none "  id="t3">
<tr>
    <td width="30%">Table3.title1</td>
<td width="30%">Table1.title2</td>
<td width="40%">Table1.title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
<table width="461" border="1" style="display:none "  id="t4">
<tr>
    <td width="30%">Table4.title1</td>
<td width="30%">title2</td>
<td width="40%">title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
<table width="461" border="1" style="display:none "  id="t5">
<tr>
    <td width="30%">Table5.title1</td>
<td width="30%">title2</td>
<td width="40%">title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
<table width="461" border="1" style="display:none "  id="t6">
<tr>
    <td width="30%">Table6.title1</td>
<td width="30%">title2</td>
<td width="40%">title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
<table width="461" border="1" style="display:none "  id="t7">
<tr>
    <td width="30%">Table7.title1</td>
<td width="30%">title2</td>
<td width="40%">title3</td>
</tr>
<tr>
    <td width="30%">11111111</td>
<td width="30%">ti222222</td>
<td width="40%">33333333</td>
</tr>
</table>
</div>
</body>
</html>