百度换肤效果

最新推荐文章于 2023-03-07 11:55:18 发布

积沙成塔——

最新推荐文章于 2023-03-07 11:55:18 发布

阅读量344

点赞数 1

分类专栏： JavaScript基础

本文链接：https://blog.csdn.net/qq_45308912/article/details/121319349

版权

HTML JavaScript 图片轮播 DOM操作事件监听

关键词由CSDN通过智能技术生成

JavaScript基础专栏收录该内容

78 篇文章 0 订阅

订阅专栏

在这里插入图片描述
效果展示：

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0px; 
				padding: 0px;
				border: 0px;
			}
			body {
				background-repeat: no-repeat;
				background-size: 100%;
			}
			img {
				height: 100px;
				width: 100px;
			}
			ul {
				list-style: none;
				margin: 100px auto;
				width: 400px;
			}
			ul li {
				float: left;
			}
		</style>
	</head>
	<body>
		<ul class="imges">
			<li>
				<img src="img/1.jpg">
			</li>
			<li>
				<img src="img/2.jpg">
			</li>
			<li>
				<img src="img/3.jpg">
			</li>
			<li>
				<img src="img/4.jpg">
			</li>
		</ul>
		<script>
			//点击某个图，就让这个图作为背景图片
			//获取元素对象集合
			var imags = document.querySelector('.imges').querySelectorAll('img');
			//循环给每个元素添加点击事件
			for (var i=0;i<imags.length;i++) {
				imags[i].onclick = function() {
					//获取body对象
					var  body = document.body;
					//因为上面已经设置了背景图片的大小和平铺方式，这里只需要添加背景图片就可以了
					body.style.backgroundImage = 'url('+this.src+')';
				}
			}
		</script>
	</body>
</html>