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

时间：2021-05-25

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

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章