<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./jquery3.6.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
height: 470px;
width: 590px;
margin: 20px auto;
}
.box .images{
height: 470px;
width: 590px;
border: 1px solid rebeccapurple;
position: relative;
}
.box .images li{
list-style: none;
}
.box .images ul li img{
height: 470px;
width: 590px;
position: absolute;
}
.hide{
display: none;
}
.list{
width: 200px;
height: 20px;
margin-top: -30px;
margin-left: 20px;
position: absolute;
}
.list ul li{
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
background-color: darkgray;
}
.list ul li:hover{
background-color: red;
}
.btn{
width: 100%;
margin-top: -48%;
position: relative;
}
.btn .btn_ul{
top: 20%;
}
.btn ul li{
height: 80px;
width: 60px;
background-color: darkgray;
color: white;
display: inline-block;
text-align: center;
font-size: 40px;
line-height: 60px;
}
.btn .btn_left{
left: 0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.btn .btn_right{
margin-left: 78.8%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="images">
<ul>
<li><a href=""><img src="https://img13.360buyimg.com/pop/s1180x940_jfs/t1/203269/33/2879/80573/614587bbE5f3bcb7b/62be2bcdc0e534e6.png.webp" alt=""></a></li>
<li><a href=""><img class="hide" src="https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/52841770585/FocusFullshop/CkJqZnMvdDEvNjU0Ni8zNi8xNjY5MC81NzUzNjkvNjBlNmJhODNFZTI2N2RlZmIvYzhkNGM0YzVhNWZiYjVjZS5wbmcSCTQtdHlfMF81NTACOO6LekITCg_ph5Hlj6_lhL_luorlnqsQAEIQCgznlYXkuqvkvJjlk4EQAUIQCgznq4vljbPmiqLotK0QAkIKCgblipvojZAQB1jZ3PXsxAE/cr/s/q.jpg" alt=""></a></li>
<li><a href=""><img class="hide" src="https://imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/100003281360/FocusFullshop/CkRqZnMvdDEvMTc1MDE4LzQwLzE4Nzg0LzI2MzAxNC82MGU2YzlmZUU0MWU0YTA4OC9lMTEzMzMyMjE1NDBjZjQyLnBuZxIJMy10eV8wXzU0MAI47ot6QhAKDOmrrua0l-WPkeawtBAAQhAKDOmSnOaDoOadpeiirRABQhAKDOeri-WNs-aKoui0rRACQgoKBuS8mOi0qBAHWNDzo8X0Ag/cr/s/q.jpg" alt=""></a></li>
<li><a href=""><img class="hide" src="https://imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/10031729166930/FocusFullshop/CkNqZnMvdDEvMTk1NDU1LzI4LzY1MjEvMTA3NTE1LzYwYmFkNWNjRWE0NTc4ZTRjLzc1ZWJjMDhhOWNiZmQ1ZjMuanBnEgo5OTktdHlfMF8xMAE47ot6WNKUnY37owI/cr/s/q.jpg" alt=""></a></li>
<li><a href=""><img class="hide" src="https://imgcps.jd.com/ling4/10034549924900/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f1/330f5f8d/cr/s/q.jpg" alt=""></a></li>
</ul>
</div>
<div class="list">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="btn">
<ul class="btn_ul">
<li class="btn_left"> < </li>
<li class="btn_right"> > </li>
</ul>
</div>
</div>
<script>
var index = 0;
$(".box .btn .btn_right").click(function () {
index ++;
$(".box .images img").eq(index).fadeIn(1000).siblings().fadeOut(1000);
})
</script>
</body>
</html>