效果展示：
代码展示：
<!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>