轮播图是前端页面最常见的功能官网 banner、商品推荐、活动图几乎随处可见。今天不使用任何插件纯原生 HTML CSS JS 手写一套完整轮播图包含自动播放、左右箭头切换、底部小圆点、鼠标悬停暂停、无缝切换。代码结构简单、注释详细、适合新手学习直接复制即可运行一、最终实现效果自动无限轮播左右箭头点击切换上一张/下一张底部小圆点跟随切换点击跳转对应图片鼠标移入暂停轮播移出继续播放无缝衔接无卡顿空白二、完整代码可直接运行原生JS轮播图script // 获取元素 let carousel document.getElementById(carousel); let imgBox document.querySelector(.imgBox); let left document.querySelector(.left); let right document.querySelector(.right); let pointList document.querySelectorAll(.point li); // 索引、图片宽度 let index 0; let imgWidth 600; // 1. 小圆点切换 for(let i 0; i pointList.length; i){ pointList[i].onclick function(){ // 更改索引 index i; // 移动图片 imgBox.style.left -index * imgWidth px; // 更新小圆点样式 changePoint(); } } // 小圆点激活样式切换函数 function changePoint(){ // 先清空所有样式 for(let i 0; i pointList.length; i){ pointList[i].classList.remove(active); } // 当前索引添加样式 pointList[index].classList.add(active); } // 2. 右箭头切换 right.onclick function(){ index; if(index pointList.length - 1){ index 0; } imgBox.style.left -index * imgWidth px; changePoint(); } // 3. 左箭头切换 left.onclick function(){ index--; if(index 0){ index pointList.length - 1; } imgBox.style.left -index * imgWidth px; changePoint(); } // 4. 自动轮播 let timer setInterval(function(){ right.onclick(); }, 2000); // 5. 鼠标悬浮暂停、离开继续 carousel.onmouseover function(){ clearInterval(timer); } carousel.onmouseout function(){ timer setInterval(function(){ right.onclick(); }, 2000); } /script三、代码核心逻辑讲解 1. CSS布局原理 外层轮播容器设置 overflow: hidden只显示一张图片的区域图片盒子横向放置所有图片通过改变 left 值实现图片平移切换。 2. 索引控制核心 定义变量 index 记录当前显示第几张图 - 向右切换index超出最大值归零 - 向左切换index--小于0跳转到最后一张 - 图片位移公式left -index * 图片宽度 3. 小圆点联动 每次切换图片时执行 changePoint()清空所有圆点样式给当前索引圆点添加高亮样式实现联动效果。 4. 自动播放 悬浮暂停 通过 setInterval 定时器实现自动轮播鼠标移入清除定时器暂停播放鼠标离开重新开启定时器体验更友好。 四、可扩展优化方向进阶 - 添加 过渡动画切换更丝滑 - 实现 无缝无限滚动当前为基础版可升级真正无缝 - 适配移动端做响应式轮播 - 增加切换淡入淡出效果 五、总结 原生 JS 轮播图是前端必练经典案例能很好的巩固DOM 操作、定时器、样式切换、条件判断、事件绑定等核心知识点。掌握这个案例就能看懂绝大多数插件轮播的底层原理。
轮播图是前端页面最常见的功能官网 banner、商品推荐、活动图几乎随处可见。今天不使用任何插件纯原生 HTML CSS JS 手写一套完整轮播图包含自动播放、左右箭头切换、底部小圆点、鼠标悬停暂停、无缝切换。代码结构简单、注释详细、适合新手学习直接复制即可运行一、最终实现效果自动无限轮播左右箭头点击切换上一张/下一张底部小圆点跟随切换点击跳转对应图片鼠标移入暂停轮播移出继续播放无缝衔接无卡顿空白二、完整代码可直接运行原生JS轮播图script // 获取元素 let carousel document.getElementById(carousel); let imgBox document.querySelector(.imgBox); let left document.querySelector(.left); let right document.querySelector(.right); let pointList document.querySelectorAll(.point li); // 索引、图片宽度 let index 0; let imgWidth 600; // 1. 小圆点切换 for(let i 0; i pointList.length; i){ pointList[i].onclick function(){ // 更改索引 index i; // 移动图片 imgBox.style.left -index * imgWidth px; // 更新小圆点样式 changePoint(); } } // 小圆点激活样式切换函数 function changePoint(){ // 先清空所有样式 for(let i 0; i pointList.length; i){ pointList[i].classList.remove(active); } // 当前索引添加样式 pointList[index].classList.add(active); } // 2. 右箭头切换 right.onclick function(){ index; if(index pointList.length - 1){ index 0; } imgBox.style.left -index * imgWidth px; changePoint(); } // 3. 左箭头切换 left.onclick function(){ index--; if(index 0){ index pointList.length - 1; } imgBox.style.left -index * imgWidth px; changePoint(); } // 4. 自动轮播 let timer setInterval(function(){ right.onclick(); }, 2000); // 5. 鼠标悬浮暂停、离开继续 carousel.onmouseover function(){ clearInterval(timer); } carousel.onmouseout function(){ timer setInterval(function(){ right.onclick(); }, 2000); } /script三、代码核心逻辑讲解 1. CSS布局原理 外层轮播容器设置 overflow: hidden只显示一张图片的区域图片盒子横向放置所有图片通过改变 left 值实现图片平移切换。 2. 索引控制核心 定义变量 index 记录当前显示第几张图 - 向右切换index超出最大值归零 - 向左切换index--小于0跳转到最后一张 - 图片位移公式left -index * 图片宽度 3. 小圆点联动 每次切换图片时执行 changePoint()清空所有圆点样式给当前索引圆点添加高亮样式实现联动效果。 4. 自动播放 悬浮暂停 通过 setInterval 定时器实现自动轮播鼠标移入清除定时器暂停播放鼠标离开重新开启定时器体验更友好。 四、可扩展优化方向进阶 - 添加 过渡动画切换更丝滑 - 实现 无缝无限滚动当前为基础版可升级真正无缝 - 适配移动端做响应式轮播 - 增加切换淡入淡出效果 五、总结 原生 JS 轮播图是前端必练经典案例能很好的巩固DOM 操作、定时器、样式切换、条件判断、事件绑定等核心知识点。掌握这个案例就能看懂绝大多数插件轮播的底层原理。
