JS原生隐藏显示图片,点击切换图片的效果

Posted on 2017-07-01 14:28  ITandYT  阅读(3897)  评论(0)  编辑  收藏  举报

今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码,

我先说一下要求,

1.有两个按钮,内容为显示,和换,

2.当点击显示的时候,按钮文字变成隐藏,同时图片显示出来,同理,当点击隐藏的时候,按钮文字变成显示,图片隐藏起来

3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来,

4.当图片隐藏的时候,图片不可变换

这就是要求,下面来看代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>换图片</title>
 6 </head>
 7 <body>
 8 <button id="btn">隐藏</button>
 9 <button id="btu">换</button>
10 <img src="11.jpg" id="img" width="300px" />
11 </body>
12 <script>
13 var btn = document.getElementById("btn");
14 var btu = document.getElementById("btu");
15 var img = document.getElementById("img");
16     var xia = 0;
17     btn.addEventListener("click",function (){
18                     //判断按钮文字内容
19         if(btn.innerText == "隐藏"){
20                         //当按钮文字为隐藏时,图片隐藏
21                  img.style.opacity = 0;
22                         //同时,按钮文字变成现实   下面同理
23             btn.innerText = "显示";
24         }else{
25             img.style.opacity = 1;
26 
27             btn.innerText = "隐藏";
28         }
29     });
30 
31     var imgs = ["11.jpg","12.jpg"];
32         //给"换"添加点击事件
33     btu.addEventListener("click",function (){
34             if(btn.innerText == "隐藏"){
35                 if(xia < 1){
36                     xia++;
37                 }else{
38                     xia = 0;
39                 }
40             img.src = imgs[xia];
41         }else{
42             alert("图片隐藏，不能切换");
43         }
44     
45 });
46  
47 </script>
48 
49 </html>

就是这么简单,你们学会了吗???