点击图片不滚动
<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>暑假</title>
<style type="text/css ">
#nav{width:1600px; height:1000px; margin:0 auto;}
#divBackground{no-repeat;z-index:-1;position: absolute;}
#na{width:892px; height:30px; background-color: #0aa6d6; margin-left:300px;}
*{margin: 0px; padding: 0px;}
#na ul{list-style: none;}
#na ul li{float: left; line-height: 30px; text-align: center; position: relative;}
#na a{text-decoration: none; color: #000; display: block; padding: 0 10px;}
#na a:hover{color: #fff; background-color: #b3aebb;}
#na ul li ul li{float: none; background-color: #0aa6d6; margin-top: 2px;font-size: 10px; width: 85px; z-index:9999;}
#na ul li ul {position: absolute; left: 0px;top: 30px;display: none;}
#na ul li ul li a:hover{background-color: #b3aebb;}
#na ul li:hover ul{display: block;}
#h{width: 892px; height: 300px; background-color: #B3AEBB; margin-left:300px; overflow: hidden; position: relative;}
#list{width: 890px; height: 300px; z-index: 1; overflow: hidden;}
#list img{float: left; width: 890px; height: 300px;}
/*#buttons{position: absolute; height: 10px; width: 100px; bottom: 20px; left: 250px; z-index: 2;}
#buttons span{margin: auto; cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
#buttons .on{background: orangered;}*/
.arrow{cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 25px; font-weight: bold; border-radius: 50%; width: 35px; height: 35px; position: absolute; z-index: 2; top: 140px; background: #B3AEBB;}
.arrow:hover {background-color: #302d2d;}
#h:hover .arrow{display: block;}
#h a{text-decoration: none; color: white;}
#prev{left: 20px;}
#next{right: 20px;}
</style>
<script type="text/javascript">
function showsubmenu(li){
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="block";
}
function hidesubmenu(li){
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="none";
}
window.onload=function(){
var h=document.getElementById('h');
var list=document.getElementById('list');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
function animate(offset){
list.style.left=parseInt(list.style.left)+offset+'px';
}
next.onclick=function(){
animate(-3000);
}
prev.onclick=function(){
animate(3000);
}
}
</script>
</head>
<body>
<div id="nav">
<div id="divBackground">
<img src="img/sky.jpg" style="width:100%;height:100%">
</div>
<div class="head">
<img style="margin-left: 400px;" src="img/biaoti.png" />
<input type="text" placeholder="请输入搜索关键词" style="float: right; margin-right: 500px; margin-top: 50px; width: 170px; height: 23px; border:1px solid #ccc;"/>
<input type="submit" style="background:url(img/search.png); width: 24px; height: 25px; float: right; margin-right: -193px; margin-top: 50px; " value=""/>
</div>
<div id="na">
<ul>
<li><a href="index.html">首页</a></li>
<li onmousemove="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="二级页面.html">部门概况</a>
<ul>
<li><a href="二级页面.html">单位介绍</a></li>
<li><a href="二级页面.html">领导组织</a></li>
<li><a href="二级页面.html">机构设置</a></li>
<li><a href="二级页面.html">工作职责</a></li>
</ul>
</li>
<li><a href="#">教育管理</a></li>
<li><a href="#">公寓管理</a></li>
<li><a href="#">资助中心</a></li>
<li><a href="#">就业服务</a></li>
<li><a href="#">易路有你</a></li>
<li><a href="#">心理健康</a></li>
<li onmousemove="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">规章制度</a>
<ul>
<li><a href="#">办事指南</a></li>
<li><a href="#">国家教育文件</a></li>
<li><a href="#">教学管理文件</a></li>
<li><a href="#">教育管理文件</a></li>
<li><a href="#">奖贷管理文件</a></li>
</ul>
</li>
<li><a href="#">资料下载</a></li>
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">单位介绍</a></li>
<li><a href="#">领导组织</a></li>
<li><a href="#">机构设置</a></li>
<li><a href="#">工作职责</a></li>
</ul>
</li>
</ul>
</div>
<div id="h">
<div id="list" style="left: -890px;">
<img src="img/bg.jpg" alt=""/>
<img src="img/12.jpg" alt=""/>
<img src="img/bg.jpg" alt=""/>
<a href="javascript:;" class="arrow" id="prev"><</a>
<a href="javascript:;" class="arrow" id="next">></a>
</div>
</div>
</body>
</html>
