轮播图圆点需与当前图片严格同步，核心是用currentIndex变量统一更新图片偏移和圆点active状态；CSS用flex居中圆点；自动轮播需暂停/恢复机制；移动端需设置cursor和touch-action并确保圆点尺寸≥44px。
轮播图的圆点如何与当前图片同步
圆点（indicator）必须和当前激活的图片严格对应，否则用户点击圆点会跳错位置。核心是维护一个 currentIndex 变量，并在每次切换时同时更新图片容器的偏移量和圆点的 active 类状态。
常见错误是只改了图片没改圆点，或用定时器切换时忘了重置圆点样式。建议把“更新图片”和“更新圆点”封装进同一个函数里，避免逻辑脱节：
function goToSlide(index) {
currentIndex = index % slides.length;
slideContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
dots.forEach((dot, i) => dot.classList.toggle('active', i === currentIndex));
}用 CSS 实现居中圆点且不干扰布局
圆点通常放在轮播图底部中央，但不能靠 position: absolute 硬塞——那样在响应式场景下容易错位或被截断。更稳妥的方式是把圆点作为轮播容器的子元素，用 Flex 布局居中：
关键点：
立即学习“前端免费学习笔记（深入）”；
- 给轮播容器设
display: flex和flex-direction: column - 圆点容器设
display: flex、justify-content: center、margin-top: 16px - 每个圆点用
width/height+border-radius: 50%画圆，别用border模拟
这样圆点会随容器宽度自适应缩放，也方便用 gap 控制间距。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
setInterval 自动轮播时如何暂停/恢复
用户鼠标悬停时必须暂停自动播放，否则体验极差；离开后应恢复，而不是从头开始。直接 clearInterval + 重新 setInterval 容易导致计时器叠加或丢失引用。
正确做法是把定时器 ID 存为变量，并统一管理：
let autoPlayTimer;
function startAutoPlay() {
autoPlayTimer = setInterval(() => goToSlide(currentIndex + 1), 3000);
}
function stopAutoPlay() {
clearInterval(autoPlayTimer);
}
// 悬停时
carousel.addEventListener('mouseenter', stopAutoPlay);
carousel.addEventListener('mouseleave', startAutoPlay);注意：调用 goToSlide 时要处理越界（比如 currentIndex + 1 >= slides.length 时回到 0），否则悬停再移开可能报错。
移动端点击圆点失效的常见原因
在手机上点不中圆点，大概率是事件绑定对象错了——你绑在了 document 或父容器上，但圆点本身没加 cursor: pointer 或 touch-action: manipulation，导致 iOS Safari 忽略了部分 touch 事件。
解决方法很简单：
- 给每个圆点加
style="cursor: pointer; touch-action: manipulation;" - 绑定事件时直接用
dot.addEventListener('click', ...)，别靠事件委托（除非你明确处理了touchstart） - 确保圆点不是空
<div></div>，至少设个min-width和背景色，不然 iOS 可能判定为不可点击区域
圆点交互看似简单，但跨设备一致性最常在这里翻车——尤其是圆点尺寸小于 44px 时，iOS 会主动降权其可点击性。
