<!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{
1200px;
height:30px;
}
.a{
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{
300px;
height:30px;
z-index:2;
position:relative;
display:none;
}
.bb div{
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;
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>
