如图所示，是一个动态的页面背景切换图，点到哪一张照片的时候，可以显示哪一张，这个图使用基础的HTML和CSS和JS完成的
他的代码如下
HTML代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>UCode</title>
<link rel="stylesheet" href="./index.css" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
/>
</head>
<body>
<div class="box">
<img src="images/1.jpg" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />
<img src="images/4.jpg" />
<img src="images/5.jpg" />
</div>
<script src="./index.js"></script>
</body>
</html>
CSS代码如下
html,
body{
padding:0;
margin:0;
width:100%;
height:100%;
}
body {
background-image: url(./images/1.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.box {
font-size: 0;
}
.box img {
box-sizing: border-box;
width: 20%;
padding: 10px;
cursor: pointer;
}
JS代码如下
const box=document.querySelector('.box');
const imgArr =box.children;
for (let i=0;i<imgArr.length;i++){
imgArr[i].addEventListener('click',function(){
document.boby.style.backgroundImage = `url(${
imgArr[i].src})`;
});
}