原生JS实现隐藏显示图片 JS实现点击切换图片效果
程序员文章站
2024-02-04 20:46:52
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生js代码,
我先说一下要求,
1.有两个按钮,内容为显示,和换,
2.当点击显示...
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生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>
就是这么简单,你们学会了吗?
上一篇： 基于node.js制作简单爬虫教程
下一篇： vue元素实现动画过渡效果