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

最新推荐文章于 2023-11-16 18:50:49 发布

原创最新推荐文章于 2023-11-16 18:50:49 发布 · 8.5k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #图片切换 #下拉菜单 #图片按钮

前端专栏收录该内容

13 篇文章

订阅专栏

前天帮人做个网页作业，大概要求就是使用两个按钮控制图片的切换，在页面右上角出现一个图片按钮，点击这个按钮出现下拉菜单。
第一个要求还是很简单的，第二个多花了我几个小时的时间，因为我只做过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>

【点击图片直达】