<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: url('../code/image/11.jpg') no-repeat center top;
}
li{
list-style: none;
}
.baidu{
overflow: hidden;
margin: 100px auto;
background-color: #ffffff;
width: 410px;
padding-top: 3px;
}
.baidu li{
float: left;
width: 100px;
margin: 0 1px;
cursor: pointer;
}
.baidu img{
width: 100%;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="../code/image/11.jpg" alt=""></li>
<li><img src="../code/image/12.jpg" alt=""></li>
<li><img src="../code/image/13.jpg" alt=""></li>
<li><img src="../code/image/14.jpg" alt=""></li>
</ul>
<script>
//1.获取元素
let imgs=document.querySelector('.baidu').querySelectorAll('img');
console.log(imgs)
//2.循环注册事件
for(let i=0;i<imgs.length;i++){
imgs[i].onclick=function(){
//this.src 就是我们点击图片的路径 ../code/image/11.jpg
console.log(this.src)
//把这个路径给body就行了
document.body.style.backgroundImage=`url(${this.src})`
}
}
</script>
</body>
</html>
百度换肤效果
最新推荐文章于 2023-05-08 17:03:37 发布