图片自行查找搜索，更改JQ的引入链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>更换背景</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="skin"></div>
<div class="box">
<button type="button" id="btn"
style="height: 50px; 100px;border-radius: 20%;background-color:springgreen ;">点击换肤</button>
<ul class="box-top">
<li><img src="img/big/0.jpg"></li>
<li><img src="img/big/1.jpg"></li>
<li><img src="img/big/2.jpg"></li>
<li><img src="img/big/3.jpg"></li>
</ul>
<ul class="box-center">
<li><img src="img/logo.png"></li>
<li><img src="img/search.png"></li>
</ul>
</div>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$(".box-top").slideToggle();
})
$(".box-top>li").click(function () {
var index = $(this).index();
$("#skin").css("background-image", "url(img/big/" + index + ".jpg)")
console.log(index);
})
})
</script>
</body>
</html>
分割线——————————————————————以下是CSS
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#skin{
position: fixed;
top: 0;
left: 0;
100%;
height: 100%;
background-image: url(img/big/0.jpg);
background-position: center 0;
background-repeat: no-repeat;
background-size:cover;
/* background-size:contain; */
}
.box{
100%;
height: 100%;
position: relative;
z-index: 10;
}
.box-top{
overflow: hidden;
900px;
height: 120px;
margin: 0 auto;
background-color: lightgrey;
}
.box-top>li>img{
float: left;
height: 100px;
200px;
background-size:cover;
margin:10px 0 0 20px;
}
.box-center{
margin-left: 25%;
}