第一步：设计页面
<!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>第二步：CSS样式设计：
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;;}第三步：JS动态设计，控制CSS和HTML元素
//定义变量，帮助实现自动轮换;
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;第四步：效果
