本文章收藏了一款自动切换选项卡效果,他是利用了js定时来设置tab 选项卡自动切换的,很网大型网站都有这种效果,他可以放文字同时也可以放图片,反正是自动切换吧,放什么内容都可以地。
<!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" />
<script type="text/网页特效" src="js/tab.min.js"></script>
<title>js 自动切换选项卡效果代码</title>
</head>
<body>
<div class="tab" id="tab04">
<h2>
<a href="#" class="current">标题0</a>
<a href="#">标题1</a>
<a href="#">标题2</a>
<a href="#">标题3</a>
</h2>
<ul>自动播放0</ul>
<ul style="display:none">自动播放1</ul>
<ul style="display:none">自动播放2</ul>
<ul style="display:none">自动播放3</ul>
</div>
<script>
//自动播放tab
slide({
handle:document.getelementbyid("tab04").getelementsbytagname("h2")[0].getelementsbytagname("a"),
content:document.getelementbyid("tab04").getelementsbytagname("ul"),
current:"current",
mode:"mouseo教程ver",
speed:1000
});
</script>
<style>
h2{ margin:0;}
ul{ padding:0; margin:0;}
.tab{ width:400px; margin:30px auto 0; font-size:12px; color:#555; border:1px solid #ccc;}
.tab h2{ width:100%; overflow:hidden; font-size:12px; font-weight:normal; background:#f2f2f2;}
.tab h2 span,
.tab h2 a{ float:left; width:50px; line-height:25px; background:#ddd; border-right:1px solid #ccc; border-bottom:1px solid #ccc; text-align:center; cursor:pointer;}
.tab h2 .current{ background:#fff; font-weight:bold; border-bottom:1px solid #fff;}
.tab ul{ padding:25px;}
</style>
</body>
</html>
源码下载地址
http://down.111cn.net/down/code/js/js_tabxuanxiangka/2010/1013/21182.html
效果预览地址
http://g.111cn.net/javascript/code/20101012/tab