代码：
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
overflow: hidden;
width: 600px;
height: 400px;
margin: 50px auto;
}
.slider {
position: absolute;
top: 0;
left: 0;
width: 300%;
height: 100%;
display: flex;
transition: transform 0.6s ease-in-out; /* 修改这一行 */
}
.slide {
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: #fff;
}
.slide1 {
background-color: #f44336;
}
.slide2 {
background-color: #2196f3;
}
.slide3 {
background-color: #4caf50;
}
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 24px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.prev {
left: 0;
}
.next {
right: 0;
}
.dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.dot {
width: 10px;
height: 10px;
background-color: rgba(255, 255, 255, 0.5);
margin: 0 5px;
border-radius: 50%;
cursor: pointer;
}
.dot.active {
background-color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="slider">
<div class="slide slide1">
<!-- <div style="display: flex;">
<img src="./img/honor/1.jpg" style="width: 200px;height: 200px;">
<img src="./img/honor/2.png" style="width: 200px;height: 200px;">
</div> -->
</div>
<div class="slide slide2">
<!-- <div style="display: flex;">
<img src="./img/honor/3.png" style="width: 200px;height: 200px;">
<img src="./img/honor/4.png" style="width: 200px;height: 200px;">
</div> -->
</div>
<div class="slide slide3">
<!-- <div style="display: flex;">
<img src="./img/honor/3.png" style="width: 200px;height: 200px;">
<img src="./img/honor/4.png" style="width: 200px;height: 200px;">
</div> -->
</div>
</div>
<div class="prev">❮</div>
<div class="next">❯</div>
<div class="dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<script>
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("slide");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.transform = "translateX(" + ((i - slideIndex + 1) * 100) + "%)";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
dots[slideIndex - 1].className += " active";
}
let timer = setInterval(function () { plusSlides(1) }, 3000);
let container = document.querySelector(".container");
container.addEventListener("mouseover", function () {
clearInterval(timer);
});
container.addEventListener("mouseout", function () {
timer = setInterval(function () { plusSlides(1) }, 3000);
});
let prev = document.querySelector(".prev");
prev.addEventListener("click", function () {
plusSlides(-1);
});
let next = document.querySelector(".next");
next.addEventListener("click", function () {
plusSlides(1);
});
let dots = document.querySelectorAll(".dot");
for (let i = 0; i < dots.length; i++) {
dots[i].addEventListener("click", function () {
currentSlide(i + 1);
});
}
</script>
</body>
</html>
效果图：
