游戏TAB滚动效果

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Tab效果</title>
    <link href="../css/tab.css" rel="stylesheet" type="text/css" />
    <script src="../js/tab.js"></script>
  </head>
  <body>
    <!--设计外部的布局效果-->
    <div id="outer">
      <ul>
        <li id="tab1" onmouseover="show(1)">佳片有约</li>
        <li id="tab2" onmouseover="show(2)">电视连载</li>
        <li id="tab3" onmouseover="show(3)">戏曲频道</li>
        <li id="tab4" onmouseover="show(4)">国际时事</li>
        <li id="tab4" onmouseover="show(5)">少儿动画</li>
      </ul>
      <div id="content">
        <div id="ct1"><img src="images/bg1.jpg"/></div>
        <div id="ct2"><img src="images/bg2.jpg"/></div>
        <div id="ct3"><img src="images/bg3.jpg"/></div>
        <div id="ct4"><img src="images/bg4.jpg"/></div>
        <div id="ct5"><img src="images/bg5.jpg"/></div>
      </div>
    </div>
  </body>
</html>

ul{
  list-style: none;width:385px;height: 16px;
}
#tab1,#tab2,#tab3,#tab4{
  width:76px;height: 30px;
  float:left;margin-right: -1px;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  font-size: 13px;
  border: 1px solid blue; 
}
#content{
  margin-left: 20px;
}
img{width:385px;height: 385px;;}

//定义变量，帮助实现自动轮换;
var index=1;
function $(id){return document.getElementById(id);}
function show(id){
  //获得事件的主要对象;
  var tab=$('tab'+id);
  var ct=$('ct'+id);
  //改变tab元素的样式；  显示选中的tab内容;
  for(var i=1;i<=5;i++){
    if(i!=id){
      $('ct'+i).style.display='none';
    }
  }
  ct.style.display='block';
  index=id;
}
//图片自动轮换的方法;
function autoTab(){
  if(index==6)index=1;  //到头了，从新开始;
  show(index);
  index++;

  setTimeout('autoTab()',1000);
}
window.onload=autoTab;