主页 / 网络编程 /

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

网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要为大家详细介绍了原生JS实现隐藏显示图片，JS实现点击切换图片效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

我先说一下要求

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

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

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

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

这就是要求,狼蚁网站SEO优化来看代码:

<!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;
   //,按钮文字变成现实 狼蚁网站SEO优化同理
  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>

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

上一篇：nodejs 子进程正确的打开方式 下一篇：Bootstrap按钮组实例详解

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by