导航栏和图片轮播 

<!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>
<script src="jquery-1.11.2.min.js"></script>
<style>
*{
	margin:0 auto;}
	
#daohang{
	width:1200px;
	height:30px;
	}
.a{
	width:300px;
	height:30px;
	text-align:center;
	line-height:30px;
	font-size:16px;
	font-family:"微软雅黑";
	background-color:#06F;
	color:#FFF;
	}
.zuo{
	height:30px;
	float:left; 
	}
.bb{
	width:300px;
	height:30px;
	z-index:2;
	position:relative;
	display:none;
	}
.bb div{
	width:300px;
	height:30px;
	text-align:center;
	line-height:30px;
	font-size:16px;
	font-family:"微软雅黑";
	background-color:#933;
	color:#FFF;
	vertical-align:middle;
	
	}
	
	
	
	
#tupian{
	margin-top:10px;
	width:1200px;
	height:450px;
	}
.lunbo{
	display:none;}

</style>
</head>

<body>
<h1>测试页面</h1>
<br />
<br />
<div id="daohang">
<div class="a" style="float:left">首页</div>
<div class="zuo">
<div class="a">视频</div>
<div class="bb">
<div>恐怖片</div>
<div>动作片</div>
</div>
</div>

<div class="zuo">
<div class="a">图片</div>
<div class="bb">
<div>美女</div>
<div>帅哥</div>
</div>
</div>

<div class="zuo">
<div class="a">新闻</div>
<div class="bb">
<div>家事</div>
<div>国事</div>
</div>
</div>
</div>

<div id="tupian">
<img class="lunbo" src="file:///E|/图片/butterfly.jpg" width="1200" height="450" style="display:block" />
<img class="lunbo" src="file:///E|/图片/flower.jpg" width="1200" height="450" style="display:none" />
<img class="lunbo" src="file:///E|/图片/night.jpg" width="1200" height="450" style="display:none" />
</div>
</body>
</html>
<script type="text/javascript">
	
	$(".zuo").mouseenter(function(){
		
		$(this).children(".bb").css("display","block");
		})
     $(".zuo").mouseleave(function(){
		 
		 $(this).children(".bb").css("display","none");
		 })
		 







	var n=1;
	
	function lunbo()
	{
		var tupian=$(".lunbo");
		tupian.css("display","none");
		
		tupian.eq(n).css("display","block");
		if(n>=tupian.length-1)
		{
			n=0;
		}
		else
		{
			n++;
		}
	}
	window.setInterval("lunbo()",1000);

	

</script>

　　

posted @ 2016-07-18 16:22  王策  阅读(594)  评论(0)    收藏  举报