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

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

这篇文章主要为大家详细介绍了原生JS实现隐藏显示图片，JS实现点击切换图片效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

今天要说的内容,看标题就都能知道了，所有知识点一览无遗啊，!咱们今天的东西，是纯纯的原生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>

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

您可能感兴趣的文章:

微信小程序修改swiper默认指示器样式的实例代码
这篇文章主要介绍了微信小程序修改swiper默认指示器样式的实例代码,代码块是从微信开发文档中心复制的代码块，在此基础上修改官方swiper样式，需要的朋友可以参考下
2018-07-07
浅谈微信小程序列表埋点曝光指南
这篇文章主要介绍了微信小程序列表埋点曝光指南，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
引入JS文件IE6报语法错误或缺少对象问题的解决方法
引入JS文件IE6报错或缺少对象问题想必很多朋友都有遇到过吧，这个问题在于文件编码上，下面为大家介绍下比较不错的解决方法
2014-01-01
js发送短信倒计时的简单实现方法
下面小编就为大家带来一篇js发送短信倒计时的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
显示js对象所有属性和方法的函数
显示js对象所有属性和方法，从网上整理了不少，大家可以看下原理都是差不多的。
2009-10-10
Node版本升级和降级完整步骤
这篇文章主要给大家介绍了关于使用Node版本升级和降级的相关资料,在开发的工程中我们可能需要经常切换node版本来应对不同的开发环境,所以需要经常使用不同版本的node,需要的朋友可以参考下
2023-09-09
JS/jQuery实现简单的开关灯效果【案例】
这篇文章主要介绍了JS/jQuery实现简单的开关灯效果,结合具体实例形式分析了javascript/jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2019-02-02
JS常用的几种数组遍历方式以及性能分析对比实例详解
这篇文章主要介绍了JS常用的几种数组遍历方式以及性能分析对比,结合实例形式详细分析了javascript针对数组遍历的几种常见使用方法及执行效率对比,具有一定参考借鉴价值,需要的朋友可以参考下
2018-04-04
webpack打包中path.resolve(__dirname, 'dist')的含义解
这篇文章主要介绍了webpack打包中path.resolve(__dirname, 'dist')的含义解析,path:path.resolve(__dirname, 'dist')就是在打包之后的文件夹上拼接了一个文件夹，在打包时，直接生成，本文给大家讲解的非常详细，需要的朋友可以参考下
2023-05-05
JS模拟百度搜索框和选项卡的实现
本文主要介绍了JS模拟百度搜索框和选项卡的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-03-03