前天帮人做个网页作业,大概要求就是使用两个按钮控制图片的切换,在页面右上角出现一个图片按钮,点击这个按钮出现下拉菜单。
第一个要求还是很简单的,第二个多花了我几个小时的时间,因为我只做过select下拉菜单,这种使用图片按钮的还真没整过。不过后来找到一种方法就是对下拉菜单单独放置一个div,设置style=“display:none”,当点击图片按钮的时候更改style="display:block"这样就实现了要求。
请看下图的展示:
【注】制作这种GIF的方法文章: FFmpeg常用命令记录(1):录取屏幕、剪切视频、将视频转化为GIF
<!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>guoliangzuoye</title>
</head>
<!--加入js-->
<script language="javascript">
<!--控制图片顺序播放的程序-->
var picArr=new Array("1.jpg","2.jpg","3.jpg");
var index=0;
function next(){
index++;
if(index==picArr.length){
index=0;
}
document.getElementById("imgp").src=picArr[index];
}
function previous(){
index--;
if(index<0){
index=picArr.length-1;
}
document.getElementById("imgp").src=picArr[index];
}
<!--控制MENU按钮打开下拉菜单的程序-->
function test()
{
var order = document.getElementById("order");
if (order.style.display=="none")
{
order.style.display="block";
}
else {order.style.display="none"; }
var orderUser = document.getElementById("orderUser");
orderUser.style.display="block";
}
</script>
<!--加入css-->
<style type="text/css">
#div1 {width:473px;height:257px;border:0px;}
#imgp {width:473px;height:257px;}
<!--对body设置为相对布局-->
body{position: relative;}
:focus {
outline: 0; <!--点击按钮的时候就不会有蓝色边框-->
}
#order {position: absolute;top: 80px;right: 10px;}
#orderUser {position: absolute;top: 20px;right: 30px;}
#div1 {position: absolute;top: 377px;left: 426px;}
#div2 {position: absolute;top: 440px;left: 290px;}
#div3 {position: absolute;top: 440px;left: 920px;}
#div4 {position: absolute;top: 599px;right: 10px;}
#div5 {position: absolute;top: 50px;right: 126px;}
</style>
<body background="beijing.jpg">
<input id="orderUser" type="image" src="44.jpg" "test();">
<div id="order" action="/order.action" style="display:none" >
<ul style="list-style-type:none" class="dropdown-menu">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">ALBUM</a></li>
<li><a href="#">MESSAGE</a></li>
</ul>
</div>
<div id="div1">
<img src="1.jpg" id="imgp" />
</br>
</div>
<div id="div2">
<input type="image" src="btn1.png" "next()" />
</div>
<div id="div3">
<input type="image" src="btn2.png" "previous()" />
</div>
<div id="div4">
<input type="image" src="11.jpg"/>
<input type="image" src="22.jpg"/>
<input type="image" src="33.jpg"/>
</div>
</body>
</html>
【点击图片直达】