原生JS实现隐藏显示图片 JS实现点击切换图片效果
更新时间：2021年08月25日 09:30:21 作者：ITandYT
这篇文章主要为大家详细介绍了原生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>
就是这么简单，你们学会了吗 ？
相关文章
在微信小程序的文档中，使用scroll-view标签，然后给它设置一个scroll-x就可以实现元素，横向排列，可以左右滑动，但是在实际开发中会遇到各种问题，下面小编给大家带来了微信小程序scroll-x失效的完美解决方法,需要的朋友可以参考下2018-07-07
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
今天闲来没啥事，研究了一下有关“null”和“0”的关系。希望大家看完了能有所收获，在此与大家分享下，希望也可以受益匪浅2013-09-09
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
今天小编大家分享一篇layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了MvcPager分页控件，修改后适用于Bootstrap，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了JS实现设置ff与ie元素绝对位置的方法,涉及JavaScript针对页面元素及元素属性的相关操作技巧,需要的朋友可以参考下2016-03-03
中国这么大，要在一张小小地图上画上中国，那么就需要按一定的比例缩小。D3 可视化画图，也是如此。本文就来和大家聊聊D3中的比例尺的绘制与使用，感兴趣的可以学习一下2022-11-11
这篇文章主要介绍了微信小程序使用video组件播放视频功能,结合实例形式分析了video组件播放本地mp4小视频的具体实现技巧,并附带源码供读者下载参考,需要的朋友可以参考下2017-12-12
本篇文章主要介绍了详解webpack分包及异步加载套路，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
本篇文章主要分享了获取今天，昨天，本周，上周，本月，上月时间实例代码，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了Layui事件监听的实现(表单和数据表格)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
最新评论