开始
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>换肤</title>
<style type="text/css">
body{ background-image: url(http://img04.sogoucdn.com/app/a/100520146/ebc04922ea94fd7be2f11946102493d2);}
ul,li{ list-style: none; margin: 15px;}
.baidu{}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="http://img04.sogoucdn.com/app/a/100520146/ebc04922ea94fd7be2f11946102493d2" width="100px" height="100px"></li>
<li><img src="http://img03.sogoucdn.com/app/a/100520146/524ade47b69439c7ba03184e55d3ec6e" width="100px" height="100px"></li>
<li><img src="http://img02.sogoucdn.com/app/a/100520146/0a9075a03657256c5d33afc1bdf19de0" width="100px" height="100px"></li>
<li><img src="http://img02.sogoucdn.com/app/a/100520146/cb2ac622c4ba7d259f8d96a740e41936" width="100px" height="100px"></li>
</ul>
<script>
var imgs = document.querySelector(".baidu").querySelectorAll("img");
//2. 循环注册事件
for (var i =0; i < imgs.length; i++){
imgs[i].onclick = function(){
//this.src 就是我们点击图片的路径
//把这个路径 this.src 给body 就可以了
document.body.style.backgroundImage = 'url('+ this.src +')';
}
}
</script>
</body>
</html>