【前端从0到1实战】第8篇：构建“轮播图/滑块” (Carousel)

【前端从0到1实战】第8篇：构建“轮播图/滑块” (Carousel)

欢迎来到本系列的第四篇。在上一篇中，我们通过“多步骤表单”掌握了状态管理。今天，我们将把这个概念应用到动画中，构建一个专业级的“轮播图”组件。

轮播图（也称“滑块”）是网页设计的基石之一。它允许我们在一个紧凑的空间内，以富有吸引力的方式循环展示多个内容块（如产品、文章、图片）。

本篇我们将手写一个功能完备的轮播图，它将包含：

“上一张/下一张”导航按钮。

底部“导航点” (Dots) 切换。

平滑的 transform 滑动动画。

第一部分：HTML 结构搭建 (骨架)

轮播图的 HTML 结构是一种精巧的“视觉欺骗”。它包含三个关键层级：

“视口” (.carousel-viewport)：一个固定大小的“窗口”，它设置了 overflow: hidden，我们只能通过这个窗口看到内容。

“胶片” (.carousel-filmstrip)：一个非常宽的容器，它包含了所有幻灯片，并排成一行 (display: flex)。它将在这个“窗口”后面左右移动。

“幻灯片” (.carousel-slide)：每一个单独的内容项。

<!-- 1. “视口”：固定大小, 隐藏溢出 -->
<div class="carousel-viewport"><!-- 2. “胶片”：一个很宽的、滑动的条带 --><!-- 它的宽度将是 (100% * 幻灯片数量) --><div class="carousel-filmstrip"><!-- 3. 幻灯片 1 --><!-- id="slide-1" 仅为示例--><div class="carousel-slide" id="slide-1"><div class="slide-content"><h2>幻灯片 1</h2><p>这是第一张幻灯片的内容。</p></div></div><!-- 幻灯片 2 --><div class="carousel-slide" id="slide-2"><div class="slide-content"><h2>幻灯片 2</h2><p>这是第二张幻灯片，背景色不同。</p></div></div><!-- 幻灯片 3 --><div class="carousel-slide" id="slide-3"><div class="slide-content"><h2>幻灯片 3</h2><p>这是最后一张幻灯片。</p></div></div></div> <!-- 结束 .carousel-filmstrip -->
</div> <!-- 结束 .carousel-viewport --><!-- 4. 左右导航按钮 (绝对定位于视口之上) -->
<div class="carousel-nav"><button id="carousel-btn-prev" class="carousel-btn" title="上一张">&lt;</button><button id="carousel-btn-next" class="carousel-btn" title="下一张">&gt;</button>
</div><!-- 5. 底部导航点 -->
<div id="carousel-dots" class="carousel-dots"><!-- JS 将会在这里动态创建导航点,或者我们可以手动创建它们, 并通过 JS 切换 .is-active--><span class="carousel-dot is-active" data-index="0"></span><span class="carousel-dot" data-index="1"></span><span class="carousel-dot" data-index="2"></span>
</div>

第二部分：CSS 样式 (皮肤与动画)

CSS 的核心是 overflow 和 transform。

.carousel-viewport 必须设置 overflow: hidden。

.carousel-filmstrip 必须设置 display: flex，并为其 transform 属性添加 transition。

.carousel-slide 必须设置 flex-basis: 100%，以确保每个幻灯片都占满“视口”的宽度。

/* --- 1. 基础容器样式 --- */
.carousel-container {
width: 800px;
max-width: 100%;
margin: 40px auto;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

/* 核心：为导航按钮提供绝对定位的锚点 */
position: relative; 

}

/* --- 2. “视口” 样式 --- */
.carousel-viewport {
width: 100%;
border-radius: 10px;

/* 核心：隐藏所有超出“窗口”的内容 */
overflow: hidden; 

}

/* --- 3. “胶片” 样式 --- /
.carousel-filmstrip {
display: flex;
/ 假设有 3 张幻灯片, 宽度就是 300% /
/ (在 JS 中动态设置会更健壮) */
width: 300%;

/* 核心：为“transform”属性添加动画 */
transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);

}

/* --- 4. “幻灯片” 样式 --- /
.carousel-slide {
/ 核心：确保每张幻灯片占满“视口” */
width: 100%;
flex-basis: 100%;
flex-shrink: 0;

/* 仅为演示：设置高度和背景色 */
height: 400px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
color: #fff;

}
.carousel-slide .slide-content {
background-color: rgba(0,0,0,0.4);
padding: 20px;
border-radius: 8px;
text-align: center;
}
/* 演示背景色 */

slide-1

slide-2

slide-3

/* --- 5. 导航按钮样式 --- /
.carousel-btn {
/ 核心：绝对定位于 .carousel-container 之上 */
position: absolute;
top: 50%;
transform: translateY(-50%);

background-color: rgba(0,0,0,0.5);
color: #fff;
border: none;
border-radius: 50%;
width: 45px;
height: 45px;
font-size: 1.5em;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease;
z-index: 10;

}
.carousel-btn:hover {
background-color: rgba(0,0,0,0.8);
}

carousel-btn-prev

carousel-btn-next

/* --- 6. 导航点样式 --- /
.carousel-dots {
/ 定位在“视口”之外，但在主容器之内 /
text-align: center;
padding: 15px 0;
}
.carousel-dot {
display: inline-block;
width: 12px;
height: 12px;
background-color: #dfe4ea;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.carousel-dot:hover {
background-color: #57606f;
}
/ 激活状态 */
.carousel-dot.is-active {
background-color: #007bff;
}

第三部分：JS 交互逻辑 (状态管理)

JS 是轮播图的“大脑”。它必须始终追踪一个核心状态：currentIndex (当前幻灯片的索引)。所有的移动和“导航点”的更新都依赖这个状态。

document.addEventListener('DOMContentLoaded', () => {

// --- 1. DOM 元素获取 ---
const filmstrip = document.querySelector('.carousel-filmstrip');
const allSlides = document.querySelectorAll('.carousel-slide');
const totalSlides = allSlides.length;const btnPrev = document.getElementById('carousel-btn-prev');
const btnNext = document.getElementById('carousel-btn-next');const allDots = document.querySelectorAll('.carousel-dot');// --- 2. 状态管理 ---
let currentIndex = 0; // 当前幻灯片的索引 (从 0 开始)
let slideWidthPercent = 100 / totalSlides;// (健壮性) 动态设置胶片宽度
filmstrip.style.width = `${100 * totalSlides}%`;// --- 3. 核心功能函数：移动到指定索引的幻灯片 ---
const goToSlide = (slideIndex) => {// 边界检查 (确保索引在 0 和 totalSlides - 1 之间)if (slideIndex < 0) {slideIndex = totalSlides - 1; // 循环到最后一张} else if (slideIndex >= totalSlides) {slideIndex = 0; // 循环到第一张}// (A) 计算需要偏移的百分比const offsetPercent = -(slideIndex * slideWidthPercent);// (B) 应用 transform 来移动“胶片”filmstrip.style.transform = `translateX(${offsetPercent}%)`;// (C) 更新当前的索引状态currentIndex = slideIndex;// (D) 更新导航点的激活状态allDots.forEach((dot, index) => {if (index === currentIndex) {dot.classList.add('is-active');} else {dot.classList.remove('is-active');}});
};// --- 4. 事件绑定 ---// “下一步”按钮
btnNext.addEventListener('click', () => {goToSlide(currentIndex + 1);
});// “上一步”按钮
btnPrev.addEventListener('click', () => {goToSlide(currentIndex - 1);
});// “导航点”
allDots.forEach((dot) => {dot.addEventListener('click', (e) => {// 从 data-index 属性读取点击的是哪个点const dotIndex = parseInt(e.target.dataset.index);goToSlide(dotIndex);});
});// --- 5. (可选) 自动播放 ---
// let autoPlayInterval = setInterval(() => {
//    goToSlide(currentIndex + 1);
// }, 3000);// (可选) 鼠标悬停时停止自动播放
// const container = document.getElementById('hero-carousel');
// container.addEventListener('mouseenter', () => clearInterval(autoPlayInterval));
// container.addEventListener('mouseleave', () => {
//    autoPlayInterval = setInterval(() => {
//        goToSlide(currentIndex + 1);
//    }, 3000);
// });// --- 6. 初始化 ---
// 确保页面加载时，UI 处于正确的第一张幻灯片状态
goToSlide(0);

});

总结

恭喜！我们完成了一个功能丰富、交互平滑的轮播图。

我们学到了：

HTML: 如何使用“视口 (viewport)” + “胶片 (filmstrip)”的嵌套结构来搭建舞台。

CSS:

如何使用 overflow: hidden 来“裁切”舞台。

如何使用 transform: translateX() 来移动“胶片”，并配合 transition 实现动画。

如何使用 flex-basis: 100% 来确保每个幻灯片占满“视口”。

JS (核心):

如何使用 currentIndex 变量来管理状态。

如何编写一个 goToSlide(index) 的中央函数来驱动所有 UI 变化（胶片移动、导航点更新）。

如何通过 data-* 属性将导航点与幻灯片索引关联起来。

在下一篇文章中，我们将迎来本系列第一个真正“动态”的挑战：异步数据加载。