百度换肤效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>* {
margin: 0;
padding: 0;
}
body {
background: url(http://5b0988e595225.cdn.sohucs.com/images/20190411/cd56fa566d9642a898f10c40fb8435fd.jpeg) no-repeat center top;
background-size: 1366px 610px;
}
li {
list-style: none;
}
.baidu {
overflow: hidden;
margin: 20px auto;
background-color: transparent;
}
.baidu li {
float: left;
margin: 0 1px;
cursor: pointer;
/* 光标 当经过的时候箭头变为小手 */
}
.baidu li img {
width: 50px;
height: 50px;
border-radius: 50%;
}</style>
</head>
<body>
<ul class="baidu">
<li><img src="http://5b0988e595225.cdn.sohucs.com/images/20190411/cd56fa566d9642a898f10c40fb8435fd.jpeg"></li>
<li><img src="http://b-ssl.duitang.com/uploads/item/201502/25/20150225131606_LRz4S.jpeg"></li>
<li><img src="http://5b0988e595225.cdn.sohucs.com/images/20190921/3cccefc9229a4267b7302e448529dca3.jpeg"></li>
<li><img src="http://i0.hdslb.com/bfs/article/42760a4dfdce3c1c7ebb5b7a352ad6b1cde66039.jpg"></li>
</ul>
<script>// 1. 获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// console.log(imgs);
// 2. 循环注册事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
// this.src 就是我们点击图片的路径 images/2.jpg
// console.log(this.src);
// 把这个路径 this.src 给body 就可以了
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}</script>
</body>
</html>
