轮播图核心是setInterval配合索引控制切换，关键三步：维护索引、自动递增并取模归零、触发视图更新；需清除旧定时器、处理越界、确保DOM加载完成；CSS用opacity过渡或transform滑动实现效果。
轮播图核心逻辑：用 setInterval + 索引控制切换
轮播图本质是定时更新当前显示项的索引，再配合 DOM 操作或 CSS 类切换来呈现效果。不依赖框架的话，关键就三步：维护当前索引、自动递增（到末尾时归零）、触发视图更新。手动切换按钮只需覆盖这个索引并重置定时器。
容易踩的坑：setInterval 未清除导致多个定时器叠加；索引越界没处理（比如从 3 直接跳到 4 而数组只有 3 项）；DOM 元素未加载完成就执行脚本。
- 始终用
clearInterval(timer)在重新开始前清理旧定时器 - 索引更新后立即取模：
currentIndex = (currentIndex + 1) % items.length - 把初始化逻辑包在
DOMContentLoaded或load事件里
CSS 过渡实现淡入淡出（opacity + transition）
这是最轻量、兼容性最好的切换效果。原理是让所有图片叠在一起，仅显示当前项（opacity: 1），其余设为 opacity: 0，再通过 transition: opacity 0.4s ease 实现渐变。
注意点：必须给容器加 position: relative，所有图片加 position: absolute; top: 0; left: 0;，否则无法层叠。
立即学习“Java免费学习笔记（深入）”；
/* 示例样式 */
.carousel-inner {
position: relative;
height: 300px;
}
.carousel-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.4s ease;
}
.carousel-item.active {
opacity: 1;
}滑动效果要用 transform: translateX() 配合 overflow: hidden
左右滑动比淡入淡出更“有交互感”，但对 DOM 结构和 CSS 要求更高。常见做法是把所有图片横向排成一行，用一个外层容器裁剪显示区域，再通过 transform: translateX(-Npx) 移动整个行。
性能影响：直接改 left 会触发重排，而 transform 是合成层操作，更流畅。但必须确保父容器有 overflow: hidden，否则滑出部分仍可见。
- 每张图宽度需固定（如
width: 100%容器宽），总宽度 =items.length * 100% - 移动距离 =
-currentIndex * containerWidth - 过渡动画加在
transform上：transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
自动轮播暂停逻辑：鼠标悬停时 clearInterval，离开时重启
这是用户体验的关键细节。只监听 mouseenter 和 mouseleave 就够了，不需要节流或防抖。
容易被忽略的地方：如果用户快速进出多次，可能造成多个 setInterval 同时存在。正确做法是把定时器 ID 存为变量，在每次暂停/恢复前都先 clearInterval，再按需新建。
let timer = null;
const startTimer = () => {
timer = setInterval(() => nextSlide(), 3000);
};
carousel.addEventListener('mouseenter', () => clearInterval(timer));
carousel.addEventListener('mouseleave', startTimer);轮播图真正难的不是切换效果本身，而是边界处理——比如用户狂点上一页按钮导致索引突变为负数，或者图片加载失败时的 fallback 显示，这些往往比动画更消耗调试时间。
