选项卡例题效果和图片轮播效果例题

一.选项卡效果

	<!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=utf-8" />
	<title>无标题文档</title>
	<style type="text/css">
	*{ margin:0px auto; padding:0px}
	#menu{ 240px; height:30px;}
	.list{ 60px; height:30px; float:left; text-align:center; line-height:30px; vertical-align:middle;}
	.list:hover{ cursor: pointer}
	.nr{ 240px; height:200px; text-align:center; line-height:200px; vertical-align:middle}
	</style>

	</head>

	<body>

	<div style="700px; height:500px; margin-top:30px">

	<div id="menu">
	<div class="list" style="background-color:#0F0" onclick="Show('d1')">娱乐</div>
	<div class="list" style="background-color:#369" onclick="Show('d2')">社会</div>
	<div class="list" style="background-color:#F60" onclick="Show('d3')">体育</div>
	<div class="list" style="background-color:#CC3" onclick="Show('d4')">军事</div>
	</div>

	<div id="d1" class="nr" style="background-color:#3C0">
	娱乐新闻
	</div>

	<div id="d2" class="nr" style="background-color:#399; display:none">
	社会新闻
	</div>
	<div id="d3" class="nr" style="background-color:#F30; display:none">
	体育新闻
	</div>
	<div id="d4" class="nr" style="background-color:#CF3; display:none">
	军事新闻
	</div>

	</div>

	</body>
	<script type="text/javascript">

	function Show(id)
	{
	//隐藏所有
	var attr = document.getElementsByClassName("nr");
	for(var i=0;i<attr.length;i++)
	{
	attr[i].style.display = "none";
	}
	//显示当前的
	document.getElementById(id).style.display = "block";
	}

	</script>
	</html>

效果图

第二个题.

图片轮播

<!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=utf-8" />
<title>无标题文档</title>

</style>

</head>
<body>

</body>
<script type="text/javascript">

window.setInterval("Huan()",2000);

//找到图片的最大索引
var n = document.getElementsByTagName("img").length-1;
//存当前图片
var d =0;

//换图
function Huan()
{
//找到所有图片
var attr = document.getElementsByTagName("img");

//当前索引加1
d++;

//判断索引是否超出范围
if(d>n)
{
d = 0;
}

//换图
//让所有隐藏
for(var i=0;i<=n;i++)
{
attr[i].style.display = "none";
}

//让该索引的显示
attr[d].style.display = "block";
}

</script>
</html>