最好能把图片放哪里也标注一下，图片宽为505px，高为707px
这里什么轮播都有，只需要下载调整
https://www.swiper.com.cn/demo/web/index.html
插件
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
.swiper {
width: 600px;
height: 400px;
margin: 120px auto;
position: relative;
overflow: hidden;
border-radius: 12px;
}
.container {
position: absolute;
width: 3600px;
height: 400px;
display: flex;
justify-content: center;
transition: left 500;
}
.container li {
width: 600px;
height: 400px;
position: relative;
}
.container li .info {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
font-size: 40px;
color: #fff;
z-index: 100;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: red;
border-radius: 50%;
}
.container li img {
width: 100%;
height: 100%;
}
.point {
width: 120px;
height: 40px;
display: flex;
justify-content: space-between;
position: absolute;
bottom: -10px;
left: 0;
right: 0;
margin: 0 auto;
}
.point span {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
}
.point .active {
background-color: red;
}
<!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>轮播图</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="swiper">
<ul class="container">
<li>
<img src="./images/1.png" alt="" />
<div class="info">1</div>
</li>
<li>
<img src="./images/2.jpg" alt="" />
<div class="info">2</div>
</li>
<li>
<img src="./images/3.jpg" alt="" />
<div class="info">3</div>
</li>
<li>
<img src="./images/4.jpg" alt="" />
<div class="info">4</div>
</li>
<li>
<img src="./images/5.jpg" alt="" />
<div class="info">5</div>
</li>
<li>
<img src="./images/1.png" alt="" />
<div class="info">1</div>
</li>
</ul>
<div class="point">
<span class="active" data-index=0></span>
<span data-index=1></span>
<span data-index=2></span>
<span data-index=3></span>
<span data-index=4></span>
</div>
</div>
<script src="./swiper.js"></script>
</body>
</html>
var container = document.getElementsByClassName("container")[0]
var width = document.getElementsByClassName("swiper")[0].clientWidth;
var timerId;
// 图片集合
var imgList = document.getElementsByTagName("img")
// 小点
var point = document.getElementsByTagName("span")
// 当前下标
current_point = 0;
// 当前图片
current_img = 0;
function autoPlay() {
current_img++;
if (current_img > imgList.length - 1) {
current_img = 1;
container.style.left = 0;
}
container.style.left = (-current_img * width + "px");
current_point++;
if (current_point > point.length - 1) {
point[point.length - 1].classList.remove("active");
current_point = 0;
} else {
point[current_point - 1].classList.remove("active");
}
point[current_point].classList.add("active");
}
timerId = setInterval(function() {
autoPlay()
}, 2000);
container.onmouseenter = function() {
clearInterval(timerId)
}
container.onmouseleave = function() {
timerId = setInterval(function() {
autoPlay()
}, 2000)
}
document.getElementsByClassName("point")[0].onclick = function(e) {
if (e.target.nodeName == "SPAN") {
if (timerId) {
clearInterval(timerId)
}
var index = parseInt(e.target.dataset.index);
point[current_point].classList.remove("active");
point[index].classList.add("active");
container.style.left = (-index * width + "px");
current_point = index;
current_img = index;
}
}
如果有用，希望能够采纳！
正在参加博客之星，希望能够给个5星好评 https://bbs.csdn.net/topics/603959560