java点击按钮隐藏图片6_原生JS实现隐藏显示图片 JS实现点击切换图片效果

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

我先说一下要求：

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

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

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

}

});

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