您的位置：首页 > Web前端 > JavaScript

JS实现点击按钮图片左右切换、点击图片按钮出现下拉菜单

2017-05-20 13:22 1336 查看
前天帮人做个网页作业，大概要求就是使用两个按钮控制图片的切换，在页面右上角出现一个图片按钮，点击这个按钮出现下拉菜单。

第一个要求还是很简单的，第二个多花了我几个小时的时间，因为我只做过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" onclick="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" onclick="next()" />
</div>

<div id="div3">
<input type="image" src="btn2.png" onclick="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航