原生JS手写轮播图（超详细保姆级教程）

轮播图是前端页面最常见的功能，官网 banner、商品推荐、活动图几乎随处可见。今天不使用任何插件，纯原生 HTML + CSS + 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 操作、定时器、样式切换、条件判断、事件绑定等核心知识点。掌握这个案例，就能看懂绝大多数插件轮播的底层原理。