点击按钮切换图片

最新推荐文章于 2023-08-21 13:55:36 发布

风叶翩翩

最新推荐文章于 2023-08-21 13:55:36 发布

阅读量5.5k

点赞数 4

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45743799/article/details/102884743

版权

JavaScript 专栏收录该内容

54 篇文章 3 订阅

订阅专栏

点击按钮时将当前显示的图片切换为指定要显示的图片

效果图演示

未点击更换图片之前显示的图片
在这里插入图片描述
点击更换图片之后

程序详解：

准备两张互相切换的图片
给更换图片按钮添加点击事件
把两张图片放在一个数组里
点击按钮后执行判断如果是第一张图片就换成第二张，如果是第二张图片就换成第一张

代码演示

注意：
我的两个图片命名为0.jpg和1.jpg

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			img{
				width: 150px;
				height: 130px;
			}
		</style>
	</head>
	<body>
		<img src="0.jpg" id="imgShow">
		<input type="button" value="更换图片" onclick="changeImg()" />
	</body>
	<script>
		var i = 0;
		var imgs=["1.jpg","0.jpg"];
		function changeImg(){
			document.getElementById("imgShow").src=imgs[i];
			if(i=0){
				i=1
			}else{
				i=0
			}
		}
	</script>
</html>

了解过程之后也快去试试吧！！！

风叶翩翩

关注

4
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
点击按钮切换图片

点击按钮时将当前显示的图片切换为指定要显示的图片效果图演示未点击更换图片之前显示的图片点击更换图片之后程序详解：准备两张互相切换的图片给更换图片按钮添加点击事件把两张图片放在一个数组里点击按钮后执行判断如果是第一张图片就换成第二张，如果是第二张图片就换成第一张代码演示注意：我的两个图片命名为0.jpg和1.jpg<!DOCTYPE html><h...
复制链接

扫一扫