<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>tab选项卡一练习</title>
???<style>
???????*{
???????????margin: 0px;
???????????padding: 0px;
???????}
???????#tab{
???????????width: 400px;
???????????height: 250px;
???????????margin: 20px auto;
???????????position: relative;
???????}
???????#tab #item{
???????????width: 370px;
???????????border: 1px solid #ccc;
???????????height: 31px;
???????????line-height: 31px;
???????????border-right:none;
???????}
???????#tab #item li{
???????????width: 40px;
???????????height: 28px;
???????????line-height: 28px;
???????????font-size: 14px;
???????????text-align:center;
???????????list-style: none;
???????????float:left;
???????????padding: 2px 0px;
???????????border-right:solid 1px #ccc;
???????}
???????#tab #item li a{
???????????text-decoration:none;
???????????color:#000;
???????}
???????#tab .box{
???????????width: 370px;
???????????height: 100%;
???????????position: relative;
???????????overflow: hidden;
???????????z-index: 1;
???????}
???????#tab .box #picTxtBox{
???????????width: 1000%;
???????????position: absolute;
???????????top: 0px;
???????????left: 0px;
???????}
???????#tab .box #picTxtBox li{
???????????list-style: none;
???????????float:left;
???????}
???????img{
???????????width: 400px;
???????????height: 250px;
???????}
???????#tab .box #picTxtBox .text{
???????????position: absolute;
???????????bottom: 0px;
???????????left: 0px;
???????????background:#000;
???????????opacity: 0.08;
???????????width: 100%;
???????????height: 40px;
???????????color:white;
???????????line-height: 40px;
???????????font-size: 14px;
???????????padding-left: 10px;
???????}
???????.box .btnleft{
???????????position: absolute;
???????????top: 40%;
???????????left: 20px;
???????????color:red;
???????????font-size: 40px;
???????????z-index: 999;
???????????font-weight: bolder;
???????????font-family: 黑体;
???????????text-decoration:none;
???????????display: none;
???????????background:#cccccc;
???????????width: 40px;
???????????text-align: center;
???????????opacity:0.3;
???????}
???????.box .btnright{
???????????position: absolute;
???????????top: 40%;
???????????right: 20px;
???????????color:red;
???????????font-size: 40px;
???????????z-index: 999;
???????????font-weight: bolder;
???????????font-family: 黑体;
???????????text-decoration:none;
???????????display: none;
???????????background:#cccccc;
???????????width: 40px;
???????????text-align: center;
???????????opacity:0.3;
???????}
???????.active{
???????????background:royalblue;
???????}
???</style>
???<script>
???????window.onload=function(){
???????????var oTab = document.getElementById("tab");
???????????var oItem = document.getElementById("item");
???????????var oLi = oItem.getElementsByTagName("li");
???????????var oPicTxtBox = document.getElementById("picTxtBox");
???????????var oPicTxtLi = oPicTxtBox.getElementsByTagName("li");
???????????var oBtnLeft = document.getElementById("btnleft");
???????????var oBtnRight = document.getElementById("btnright");
???????????var iNow=0;
???????????for(var i=0;i<oLi.length;i++){
???????????????oLi[i].index = i;
???????????????oLi[i].onmouseover=function(){
???????????????????iNow = this.index;
???????????????????move(iNow);
???????????????}
???????????}
???????????oTab.onmouseover = function(){
???????????????oBtnLeft.style.display = "block";
???????????????oBtnRight.style.display = "block";
???????????}
???????????oTab.onmouseout = function(){
???????????????oBtnLeft.style.display = "none";
???????????????oBtnRight.style.display = "none";
???????????}
???????????oBtnRight.onclick=function(){
???????????????iNow++;
???????????????if(iNow>oLi.length-1){
???????????????????iNow = 0;
???????????????}
???????????????move(iNow);
// ???????????????alert(iNow);
???????????????for(var n=0;n<oLi.length;n++){
???????????????????oPicTxtLi[n].style.display = "none";
???????????????????oLi[n].className = "";
???????????????}
???????????????document.title = "当前的索引是="+iNow;
???????????????oPicTxtLi[iNow].style.display = "block";
???????????????oLi[iNow].className = "active";
???????????};
???????????oBtnLeft.onclick=function(){
???????????????iNow--;
???????????????if(iNow<0){
???????????????????iNow = oLi.length-1;
???????????????}
???????????};
???????????//封装的函数
???????????function move(index){
???????????????for(var n=0;n<oLi.length;n++){
???????????????????oPicTxtLi[n].style.display = "none";
???????????????????oLi[n].className = "";
???????????????}
???????????????document.title = "当前的索引是="+iNow;
???????????????oPicTxtLi[iNow].style.display = "block";
???????????????oLi[iNow].className = "active";
???????????}
???????}
???</script>
</head>
<body>
???<div id="tab">
???????<div class="item"id="item">
???????????<li class="active"><a href="javascript:void(0);">资讯</a></li>
???????????<li><a href="javascript:void(0);">娱乐</a></li>
???????????<li><a href="javascript:void(0);">体育</a></li>
???????????<li><a href="javascript:void(0);">汽车</a></li>
???????????<li><a href="javascript:void(0);">时尚</a></li>
???????????<li><a href="javascript:void(0);">历史</a></li>
???????????<li><a href="javascript:void(0);">记实</a></li>
???????????<li><a href="javascript:void(0);">精品</a></li>
???????????<li><a href="javascript:void(0);">游戏</a></li>
???????</div>
???????<div class="box">
???????????<a class="btnleft" id="btnleft" href="javascript:void(0)"><</a>
???????????<a class="btnright" id="btnright" href="javascript:void(0)">></a>
???????????<ul id="picTxtBox">
???????????????<li style="display: block">
???????????????????<a href="javascript:void(0);"><img src="images/photo1.jpg"style="width: 370px"></a>
???????????????????<p class="keep"> </p>
???????????????????<p class="text">广州突发大火</p>
???????????????</li>
???????????????<li>
???????????????????<a href="javascript:void(0);"><img src="images/photo2.jpg"style="width: 370px"></a>
???????????????????<p class="keep"> </p>
???????????????????<p class="text">精品</p>
???????????????</li>
???????????????<li>
???????????????????<a href="javascript:void(0);"><img src="images/photo3.jpg"style="width: 370px"></a>
???????????????????<p class="keep"> </p>
???????????????????<p class="text">因为这张照片</p>
???????????????</li>
???????????????<li>
???????????????????<a href="javascript:void(0);"><img src="images/photo4.jpg"style="width: 370px"></a>
???????????????????<p class="keep"> </p>
???????????????????<p class="text">亚洲女排</p>
???????????????</li>
???????????????<li>
???????????????????<a href="javascript:void(0);"><img src="images/photo5.jpg"style="width: 370px"></a>
???????????????????<p class="keep"> </p>
???????????????????<p class="text">广州豪车</p>
???????????????</li>
???????????????<li>
???????????????????<a href="javascript:void(0);"><img src="images/photo6.jpg"style="width: 370px"></a>
???????????????????<p class="keep"> </p>
???????????????????<p class="text">奥运冠军</p>
???????????????</li>
???????????????<li>
???????????????????<a href="javascript:void(0);"><img src="images/photo7.jpg"style="width: 370px"></a>
???????????????????<p class="keep"> </p>
???????????????????<p class="text">军事机密</p>
???????????????</li>
???????????????<li>
???????????????????<a href="javascript:void(0);"><img src="images/photo8.jpg"style="width: 370px"></a>
???????????????????<p class="keep"> </p>
???????????????????<p class="text">房产</p>
???????????????</li>
???????????????<li>
???????????????????<a href="javascript:void(0);"><img src="images/photo9.jpg"style="width: 370px"></a>
???????????????????<p class="keep"> </p>
???????????????????<p class="text">游戏</p>
???????????????</li>
???????????</ul>
???????</div>
???</div>
</body>
</html>
tab选项卡代码（原生js）
原文地址：http://www.cnblogs.com/xlhlcy/p/7605659.html