前天帮人做个网页作业，大概要求就是使用两个按钮控制图片的切换，在页面右上角出现一个图片按钮，点击这个按钮出现下拉菜单。
第一个要求还是很简单的，第二个多花了我几个小时的时间，因为我只做过select下拉菜单,这种使用图片按钮的还真没整过。不过后来找到一种方法就是对下拉菜单单独放置一个div，设置style=“display:none”，当点击图片按钮的时候更改style="display:block"这样就实现了要求。
请看下图的展示：
【注】制作这种GIF的方法文章： FFmpeg常用命令记录（1）：录取屏幕、剪切视频、将视频转化为GIF
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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>
【点击图片直达】
