已更新菜单栏的动态操作
解析见原博客http://blog.sina.com.cn/s/blog_5aa6ec350102xr1g.html
<html>
<head>
<meta charset="UTF-8">
<title>Bing 搜索</title>
<style>
a{color:darkgrey;
}
a:hover{
color:white;
}
#header li{
list-style: none;
display: inline;
margin-left: 40px;
}
#h2{
position: absolute;
left: 1400px;
top: 15px;
z-index: 2;
}
.menu ul{
width: 40px;
height:40px;
position: absolute;
left: 1300px;
top: 25px;
border:2px solid black;
padding: 20px
z-index: 2;
}
.menu a:hover {
background-color: #ccc;
}
.aaa {
position: absolute;
left: 500px;
top: 200px;
font-size:25px;
width:500px; height:55px;
z-index: 2;
}
.h2{
position: absolute;
left: 955px;
top: 200px;
z-index: 2;
}
.h3{
font-size:55px;
position: absolute;
left: 350px;
top: 200px;
}
.bottom {
position: absolute;
left: 1300px;
top: 600px;
font-size:55px;
}
.bottom a{
border:2px solid;
border-radius:50%;
margin: 20px;
}
.bottom a:hover{
color:black;
background: aliceblue;
}
.container {
top: 0px;
position: relative;
width: 1500px;
height: 500px;
margin:0px auto 0 0;
box-shadow: 0 0 5px #ccc;
overflow: hidden;
}
.photo {
position: absolute;
width: 3000px;
height: 500px;
z-index: -100;
}
.container .photo img {
float: left;
width: 1500px;
height: 500px;
z-index: -100;
}
.menu ul{
list-style-type: none;
margin:0px;
}
#subnav{
display: none;
z-index: 100;
}
</style>
</head>
<body>
<div id="header">
<ul id="h1">
<li >
<a href="https://cn.bing.com/images?FORM=Z9LH">图片</a>
</li>
<li>
<a href="https://cn.bing.com/images?FORM=Z9LH"> 视频等</a>
</li>
</ul>
</div>
<div id="menu" class="menu">
<button onclick="change()">
<img id="h2" src="1.png" width="40px" height="30px" >
</button>
<ul id="subnav">
<li>
<a href="https://cn.bing.com/images?FORM=Z9LH">设置</a>
</li>
</ul>
</div>
<div class="sou" >
<span class=h3>Bing</span>
<input class="aaa" type="text" value="" />
<a href="https://cn.bing.com/images?FORM=Z9LH">
<img class="h2" src="2.jpg" width="55px" height="60px" >
</a>
</div>
<div class="bottom">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="left"><</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="right">></a>
</div>
<div class="container" >
<div class="photo" id="p"style="left:-1500px;">
<img src="3.jpg" alt="">
<img src="4.jpg" alt=""></div></div>
<script type="text/javascript">
let flag=0;
var p=document.getElementById("p");
var next = document.querySelector(".right");
var last = document.querySelector(".left");
next.onclick = function () {
next1();
}
last.onclick = function () {
last1();
}
function next1 () {
var newLeft = parseInt(p.style.left)-1500;
if(newLeft==-3000)newLeft=0;
p.style.left = newLeft + "px";
}
function last1 () {
var newLeft = parseInt(p.style.left)+1500;
if(newLeft==1500)newLeft=-1500;
p.style.left = newLeft + "px";
}
function change(){
if(flag%2==0)
document.getElementById("subnav").style.display="block";
else document.getElementById("subnav").style.display="none";
flag++;
}
</script>
</body>
</html>