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

时间：2021-11-20 05:24:31

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

我先说一下要求,

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

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

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

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

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>换图片</title>

 </head>

 <body>

 <button id="btn">隐藏</button>

 <button id="btu">换</button>

 <img src="11.jpg" id="img" width="300px" />

 </body>

 <script>

 var btn = document.getElementById("btn");

 var btu = document.getElementById("btu");

 var img = document.getElementById("img");

     var xia = 0;

     btn.addEventListener("click",function (){

                     //判断按钮文字内容

         if(btn.innerText == "隐藏"){

                         //当按钮文字为隐藏时,图片隐藏

                  img.style.opacity = 0;

                         //同时,按钮文字变成现实   下面同理

             btn.innerText = "显示";

         }else{

             img.style.opacity = 1;

             btn.innerText = "隐藏";

         }

     });

     var imgs = ["11.jpg","12.jpg"];

         //给"换"添加点击事件

     btu.addEventListener("click",function (){

             if(btn.innerText == "隐藏"){

                 if(xia < 1){

                     xia++;

                 }else{

                     xia = 0;

                 }

             img.src = imgs[xia];

         }else{

             alert("图片隐藏，不能切换");

         }

 });

 </script>

 </html>

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

相关文章