原生JavaScript轮播图通过setInterval自动切换图片，用取模运算实现索引循环，结合img.complete检查和load/error事件处理加载状态，添加CSS过渡实现淡入淡出，并支持鼠标悬停暂停。
用原生 JavaScript 配合定时器控制图片切换是最直接、兼容性好、不依赖框架的实现方式。核心不是“播放”，而是“按序轮换”——浏览器没有内置幻灯片组件，得自己管理索引、防越界、等图加载完再切。
基础结构与图片数组准备
先在 HTML 中放一个 <img id="carousel-img"> 作为显示容器。然后在 JS 中定义图片路径数组：
- 确保数组非空，例如：
const images = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"]; - 声明当前索引：
let idx = 0; - 获取图片元素：
const imgEl = document.getElementById("carousel-img");
用 setInterval 实现自动切换
每 3 秒切换一次，关键要处理索引循环和加载状态：
- 用
idx = (idx + 1) % images.length自动回到第一张，避免手动判断边界 - 切换前建议检查
imgEl.complete，如果为false（还没加载完），可跳过本次切换，防止闪白 - 每次设
src前，用imgEl.addEventListener("load", handler, { once: true })绑定单次加载完成回调，避免重复监听或丢失事件 - 加上
onerror处理 404：失败时自动跳到下一张，不卡住
加淡入淡出更自然
纯换 src 会突兀，加 CSS 过渡更友好：
立即学习“前端免费学习笔记（深入）”；
- 给
img加样式：opacity: 1; transition: opacity 0.4s ease; - 切换前先设
imgEl.style.opacity = 0; - 在
load回调里再设imgEl.style.opacity = 1;
控制轮播启停（提升体验）
用户鼠标悬停时暂停，移开继续，这是基本交互规范：
- 用
let timer = null存储定时器 ID -
timer = setInterval(...)启动；clearInterval(timer)暂停 - 绑定
mouseenter和mouseleave到轮播容器上即可
