素材如下：
素材照片1：
素材照片2：
素材照片3：
素材照片4:
因为本人喜欢迪丽热巴，所以就在网上找了热巴的图片，图片没有用心找，所以尺寸都不一样，导致效果图片不是很清晰。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿百度换肤</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 1920px;
height:1132px;
background:url(reba1.jpg) no-repeat center top;
background-size: contain;
}
ul{
margin: 140px 500px;
}
img{
border:1px solid bisque;
display: inline-block;
width: 200px;
height: 125px;
}
li{
display: inline-block;
list-style: none;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="reba1.jpg" alt="" /></li>
<li><img src="reba2.webp" alt=""/></li>
<li><img src="reba3.jpg" alt="" /></li>
<li><img src="reba4.jpg" alt="" /></li>
</ul>
<script>
var imgs=document.querySelector('.baidu').querySelectorAll('img');
console.log(imgs[0].src);
for(var i=0;i<imgs.length;i++){
imgs[i].onclick=function(){
document.body.style.backgroundImage='url('+this.src+')';
}
}
</script>
</body>
</html>
运行效果：
核心算法就是 先把四张图片放在一个ul里，然后缩小一下你想要的尺寸并居中，然后就是写JS代码onclick了。注意要把四张图片放在一个document伪数组里面，再用for循环实现点击后背景图片的变化。
