对应Pink老师的百度换肤效果。
效果如下图,点击下面的小图,更换上面的头像。和更换背景图。
值得注意的一点是:
我在设置body背景background-image的路径时候,记得里面路径用引号的,而且要手动码进去,不能直接复制相对路径的方法复制进去,因为这样会无效,显示不出来。
(关于图片路径问题我有一个坑在这里。我后面还需要找找原因,因为有时候路径是对的 用到另一个路径又错了 我没搞懂)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image: url('imge/pic1.jpg');
}
.change {
margin: 0 auto;
width: 1000px;
height: 600px;
display: grid;
grid-template-rows: 450px 250px;
justify-items: center;
align-items: end;
}
ul {
padding: 5px;
background-color: burlywood;
padding-bottom: 0px;
padding-right: 0px;
}
li {
float: left;
list-style: none;
padding: 0px 5px 0px 0px;
}
.wid {
width: 300px;
height: 300px;
border: 10px solid salmon;
border-radius: 150px;
}
li img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="change">
<img src="imge\pic1.jpg" alt="" class="wid">
<ul class="tongle">
<li><img src="imge\pic1.jpg" alt=""></li>
<li><img src="imge\pic2.jpg" alt=""></li>
<li><img src="imge\pic3.jpg" alt=""></li>
<li><img src="imge\pic4.jpg" alt=""></li>
</ul>
</div>
<script>
//1.获取元素
var imgs = document.querySelector('.tongle').querySelectorAll('img');
var wid = document.querySelector('.wid');
// console.log(imgs)
//2.循环事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
// this.src就是我们点击的图片路径
wid.src = this.src;
document.body.style.backgroundImage='url('+this.src+')';
}
}
</script>
</body>
</html>