源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-05-03 17:08 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:原生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>     
 就是这么简单,你们学会了吗?
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部