javascript 切换图片-原生JS实现图片的隐藏和显示 JS实现点击和切换图片的效果

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

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

更新时间：2021年8月25日09:30:21 作者：ITandYT

本文主要详细介绍原生JS隐藏和显示图片，以及JS实现点击和切换图片的效果。 文章中的示例代码非常详细javascript 切换图片，具有一定的参考价值。 有兴趣的朋友可以参考一下

今天我要讲的内容，看标题就明白了，所有知识点一目了然！ 明天我们要讲的是纯原生JS代码。

我先说一下要求：

1. 有两个按钮，分别是显示和更改内容。

2、点击显示时，按钮文字隐藏，同时显示图片。 同样，点击隐藏时，按钮文字显示javascript 切换图片，图片隐藏

3.当您点击更改时，图片会变成另一张，当您再次点击时，图片会变回来，

4.图片隐藏时，无法更改图片

这是需求，我们看代码：

 
 


隐藏
换


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("图片隐藏，不能切换");
 }
 
});
 

  

就这么简单，你学会了吗？