学前端到了一定阶段总会想动手写点能看到效果的东西。轮播图就是一个特别好的练手项目——它不复杂但涵盖了布局、定位、事件、DOM操作、定时器等多个知识点写完之后对前端基础的理解会扎实很多。 这篇文章就从我写的一个小米商城风格轮播图出发把实现思路和核心代码完整拆解一遍。最终效果预览- 3张图片自动轮播每3秒切换一张 - 左右箭头点击切换上一张/下一张 - 底部小圆点指示当前图片点击可跳转 - 鼠标悬停暂停自动播放移出继续整体流程分三步1. HTML结构一个容器 .box 包裹图片列表 ul外加箭头和小圆点2. CSS样式容器 overflow: hidden 只显示一张ul 宽度为图片总宽度3. JS逻辑点击箭头或小圆点时改变 ul 的 transform: translateX() 值1.HTML结构div classbox idbox !-- 图片列表 -- ul idul li img srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/72d2f359aa032bc5f6372b3022b39a92.jpg?thumb1w2146h805fwebpq90 alt小米15 /li li img srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1484efbc954604f2fff16aa8a7447c3d.jpg?thumb1w2146h805fwebpq90 altRedmi K80 /li li img srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2481d91110fb14bbfe2b8c07325cff97.jpg?thumb1w2146h805fwebpq90 alt小米家电 /li /ul !-- 左右箭头 -- div classxiaoyu idleftBtnlt;/div div classdayu idrightBtngt;/div !-- 底部小圆点 -- div classpoint idpoint div classactive/div div/div div/div /div /div2.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);index偏移量显示效果00px显示第1张1-2146px显示第2张2-4292px显示第3张第三步自动播放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();总结轮播图的实现核心就三件事CSSoverflow: hidden做窗口transform: translateX()做移动JS改变translateX的值来切换图片用setInterval实现自动播放事件箭头/圆点控制切换鼠标悬停控制暂停/继续功能清单功能实现方式自动轮播setInterval(next, 3000)鼠标悬停暂停mouseenter清除定时器左右箭头切换点击修改index值小圆点跳转点击直接跳转到对应图片循环播放边界判断到头跳回第一张
学前端到了一定阶段总会想动手写点能看到效果的东西。轮播图就是一个特别好的练手项目——它不复杂但涵盖了布局、定位、事件、DOM操作、定时器等多个知识点写完之后对前端基础的理解会扎实很多。 这篇文章就从我写的一个小米商城风格轮播图出发把实现思路和核心代码完整拆解一遍。最终效果预览- 3张图片自动轮播每3秒切换一张 - 左右箭头点击切换上一张/下一张 - 底部小圆点指示当前图片点击可跳转 - 鼠标悬停暂停自动播放移出继续整体流程分三步1. HTML结构一个容器 .box 包裹图片列表 ul外加箭头和小圆点2. CSS样式容器 overflow: hidden 只显示一张ul 宽度为图片总宽度3. JS逻辑点击箭头或小圆点时改变 ul 的 transform: translateX() 值1.HTML结构div classbox idbox !-- 图片列表 -- ul idul li img srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/72d2f359aa032bc5f6372b3022b39a92.jpg?thumb1w2146h805fwebpq90 alt小米15 /li li img srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1484efbc954604f2fff16aa8a7447c3d.jpg?thumb1w2146h805fwebpq90 altRedmi K80 /li li img srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2481d91110fb14bbfe2b8c07325cff97.jpg?thumb1w2146h805fwebpq90 alt小米家电 /li /ul !-- 左右箭头 -- div classxiaoyu idleftBtnlt;/div div classdayu idrightBtngt;/div !-- 底部小圆点 -- div classpoint idpoint div classactive/div div/div div/div /div /div2.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);index偏移量显示效果00px显示第1张1-2146px显示第2张2-4292px显示第3张第三步自动播放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();总结轮播图的实现核心就三件事CSSoverflow: hidden做窗口transform: translateX()做移动JS改变translateX的值来切换图片用setInterval实现自动播放事件箭头/圆点控制切换鼠标悬停控制暂停/继续功能清单功能实现方式自动轮播setInterval(next, 3000)鼠标悬停暂停mouseenter清除定时器左右箭头切换点击修改index值小圆点跳转点击直接跳转到对应图片循环播放边界判断到头跳回第一张
