实现一个简单的轮播图效果，可以通过 HTML、CSS（配合少量 javascript）来完成。下面是一个基础但实用的自动轮播图方案，使用 CSS 动画和简单的 js 控制切换。
1. 基本HTML结构
创建一个包含图片的容器，每张图片放在一个 slide 中：
<div class=”carousel”>
<img src=”image1.jpg” class=”slide” alt=”Image 1″>
<img src=”image2.jpg” class=”slide” alt=”Image 2″>
<img src=”image3.jpg” class=”slide” alt=”Image 3″>
</div>
2. css样式设置
使用绝对定位将所有图片叠在一起，并通过 opacity 控制显示隐藏：
.carousel {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
margin: 0 auto;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
/ 当前显示的图片 /
.slide.active {
opacity: 1;
}
3. 使用JavaScript控制轮播
添加简单脚本，定时切换 active 类：
立即学习“前端免费学习笔记（深入）”；
<script>
let currentIndex = 0;
const slides = document.querySelectorAll(‘.slide’);
function showSlide(index) {
slides.foreach(slide => slide.classlist.remove(‘active’));
slides[index].classList.add(‘active’);
}
function nextSlide() {
currentIndex = (currentIndex + 1) % slides.Length;
showSlide(currentIndex);
}
// 初始显示第一张
showSlide(0);
// 每3秒切换一次
setInterval(nextSlide, 3000);
</script>
4. 可选：添加淡入淡出动画
你也可以用 CSS @keyframes 实现更平滑的过渡：
@keyframes fade {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
.slide {
animation: fade 6s infinite;
/ 每张图延迟不同时间播放动画 /
}
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 2s; }
.slide:nth-child(3) { animation-delay: 4s; }
这种方式完全用 CSS 实现自动轮播，无需 JavaScript，但灵活性较低。
基本上就这些。用 CSS 控制布局和动画，JS 控制逻辑切换，就能做出一个简洁有效的轮播图。不复杂但容易忽略细节，比如 overflow 隐藏和 transition 过渡效果的设置。