切换图片

最新推荐文章于 2023-03-20 20:48:26 发布

这就是我的昵称j

最新推荐文章于 2023-03-20 20:48:26 发布

阅读量206

点赞数 1

本文链接：https://blog.csdn.net/jiao0916/article/details/82858711

版权

tip:图片请改成自己的图片名称

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 100%;
			height: 200px;
			text-align: center;
			background-color: transparent;

		}
		img{
			width: 200px;
			height: 150px;
		}
	</style>
	<script type="text/javascript">
			window.onload=function() {
				// 方法一  原生js
					// var img_1=document.getElementById('img_1');
					// img_1.onclick=function(){
					// 		document.body.style.backgroundImage="url(1.jpg)";
					// }
					// var img_2=document.getElementById('img_2');
					// img_2.onclick=function(){
					// 		document.body.style.backgroundImage="url(3.jpg)";
					// }
					// var img_3=document.getElementById('img_3');
					// img_3.onclick=function(){
					// 		document.body.style.backgroundImage="url(5.jpg)";
					// }
		
			// 方法二
			//封装：将一样的代码放在函数体当中，不一样的地方通过参数传递
			// function fn(id,url) {
			// 		var image=document.getElementById(id);
			// 		image.onclick=function(){
			// 			document.body.style.backgroundImage=url;
			// 		}
			// }
			// fn("img_1","url(1.jpg)");
			// fn("img_2","url(3.jpg)");
			// fn("img_3","url(5.jpg)");
			


			// 方法三  通过循环获取对应的图片
			var images = document.getElementsByTagName("img");
			for(var i = 0;i<images.length;i++) {
				images[i].onclick = function() {
					document.body.style.backgroundImage = "url("+this.src+")";
				}
			}
		}	
	</script>
</head>
<body>
	<div>
			<img src="1.jpg" id="img_1">
			<img src="3.jpg" id="img_2">
			<img src="5.jpg" id="img_3">
	</div>

</body>
</html>