学前端到了一定阶段，总会想动手写点"能看到效果"的东西。轮播图就是一个特别好的练手项目——它不复杂，但涵盖了布局、定位、事件、DOM操作、定时器等多个知识点，写完之后对前端基础的理解会扎实很多。 这篇文章就从我写的一个小米商城风格轮播图出发，把实现思路和核心代码完整拆解一遍。

最终效果预览：

- 3张图片自动轮播，每3秒切换一张 - 左右箭头点击切换上一张/下一张 - 底部小圆点指示当前图片，点击可跳转 - 鼠标悬停暂停自动播放，移出继续

整体流程分三步：

1. HTML结构：一个容器 `.box` 包裹图片列表 `ul`，外加箭头和小圆点
2. CSS样式：容器 `overflow: hidden` 只显示一张，`ul` 宽度为图片总宽度
3. JS逻辑：点击箭头或小圆点时，改变 `ul` 的 `transform: translateX()` 值

1.HTML结构：

<div class="box" id="box"> <!-- 图片列表 --> <ul id="ul"> <li> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/72d2f359aa032bc5f6372b3022b39a92.jpg?thumb=1&w=2146&h=805&f=webp&q=90" alt="小米15"> </li> <li> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1484efbc954604f2fff16aa8a7447c3d.jpg?thumb=1&w=2146&h=805&f=webp&q=90" alt="Redmi K80"> </li> <li> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2481d91110fb14bbfe2b8c07325cff97.jpg?thumb=1&w=2146&h=805&f=webp&q=90" alt="小米家电"> </li> </ul> <!-- 左右箭头 --> <div class="xiaoyu" id="leftBtn">&lt;</div> <div class="dayu" id="rightBtn">&gt;</div> <!-- 底部小圆点 --> <div class="point" id="point"> <div class="active"></div> <div></div> <div></div> </div> </div>

2.CSS核心：

第一步：容器做窗口

.box { width: 100%; max-width: 2146px; height: 805px; margin: 0 auto; position: relative; overflow: hidden; /* 关键：超出的部分隐藏，只显示一张图 */ }

第二步：图片横向排列

.box ul { width: 6438px; /* 2146 × 3张图 */ height: 805px; } .box ul li { float: left; /* 横向排列 */ width: 2146px; height: 805px; } .box ul li img { width: 100%; height: 100%; display: block; }

核心逻辑：ul宽度 = 单张图片宽度 × 图片数量，所有li左浮动后横成一行。

第三步：箭头定位

.arrow { position: absolute; top: 50%; transform: translateY(-50%); /* 垂直居中 */ cursor: pointer; } .arrow-left { left: 10px; } .arrow-right { right: 10px; } .arrow:hover { background-color: rgba(0, 0, 0, 0.4); color: #fff; }

第四步：小圆点居中

.point { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); /* 水平居中 */ display: flex; gap: 14px; } .point div { width: 17px; height: 17px; border-radius: 50%; background-color: #8e8f90; cursor: pointer; } .point .active { background-color: #ff6700; /* 当前图片高亮为橙色 */ }

3. JavaScript核心：

第一步：获取元素

var ul = document.getElementById('ul'); var points = document.querySelectorAll('.point div'); var leftBtn = document.getElementById('leftBtn'); var rightBtn = document.getElementById('rightBtn'); var box = document.getElementById('box'); var imgWidth = 2146; // 单张图片宽度 var total = 3; // 图片总数 var index = 0; // 当前显示第几张（从0开始） var timer = null; // 定时器

第二步：核心切换函数

function goTo(idx) { // 循环边界处理 if (idx < 0) idx = total - 1; else if (idx >= total) idx = 0; index = idx; // 核心：移动整行图片 ul.style.transition = 'transform 0.5s ease'; ul.style.transform = 'translateX(-' + (index * imgWidth) + 'px)'; // 更新小圆点样式 for (var i = 0; i < points.length; i++) { points[i].className = ''; if (i === index) points[i].className = 'active'; } }

核心逻辑就这一句：

ul.style.transform = 'translateX(-' + (index * imgWidth) + 'px)';

第三步：自动播放

function next() { goTo(index + 1); } function prev() { goTo(index - 1); } function startAutoPlay() { timer = setInterval(next, 3000); // 每3秒切换 } function stopAutoPlay() { clearInterval(timer); }

第四步：绑定事件

// 右箭头 rightBtn.addEventListener('click', function() { stopAutoPlay(); next(); startAutoPlay(); // 手动点击后重新计时 }); // 左箭头 leftBtn.addEventListener('click', function() { stopAutoPlay(); prev(); startAutoPlay(); }); // 小圆点点击跳转 for (var i = 0; i < points.length; i++) { (function(j) { points[j].addEventListener('click', function() { stopAutoPlay(); goTo(j); startAutoPlay(); }); })(i); } // 鼠标悬停暂停 / 移出继续 box.addEventListener('mouseenter', stopAutoPlay); box.addEventListener('mouseleave', startAutoPlay); // 启动自动播放 startAutoPlay();

总结

轮播图的实现，核心就三件事：

CSS：overflow: hidden做窗口，transform: translateX()做移动

JS：改变translateX的值来切换图片，用setInterval实现自动播放

事件：箭头/圆点控制切换，鼠标悬停控制暂停/继续

功能清单：