这是最简单的轮播图，图片自己加-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_64180190/article/details/135145401

本文介绍了使用HTML、CSS和JavaScript创建一个基本的轮播图组件，包括滑块切换、导航按钮控制和鼠标悬停暂停功能。代码展示了如何使用CSS动画和DOM操作来管理轮播效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

<!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>

</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);
}

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>

效果图：