如下所示:
点击任意图片后:
实现!
下面是代码:
<!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>
/* 百度换肤 */
.huan {
width: 800px;
}
.huan>img {
width: 200px;
float: left;
}
</style>
</head>
<body>
<!-- 百度换肤 -->
<div class="huan">
<img src="../img/百度换肤1.png" alt="">
<img src="../img/百度换肤2.png" alt="">
<img src="../img/百度换肤4.png" alt="">
</div>
<script>
// 获取
var imgs = document.querySelectorAll('img');
var bodys = document.querySelectorAll('body');
// 循环每一次点击--因为有多个点击事件
for (var i = 0; i < imgs.length; i++) {
// onclick鼠标点击事件
// 添加事件
imgs[i].onclick = function() {
// 点击后更改body背景图片路径
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>
</html>