在Cursor中快速搭建可运行轮播图需分三步：先用AI生成HTML+CSS结构并手动清除script和onclick；再手写JS控制逻辑，严格匹配图片数量、用百分比位移、加减模运算防越界、避免闭包陷阱；最后补全CSS过渡与激活态样式，并确保图片宽高适配。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Cursor中快速搭建一个可运行的轮播图模块，需要结合AI生成能力与手动校验逻辑，避免直接复制粘贴导致DOM结构错乱或事件失效。
用AI指令生成基础HTML+CSS结构
在Cursor编辑器中新建一个carousel.html文件，光标定位到空白处，按Ctrl+K（Windows）或Cmd+K（Mac）唤出AI命令框，输入：“生成一个纯HTML+CSS的横向轮播图，含3张图片、左右箭头、底部指示点，不依赖任何JS库”。
等待AI返回代码后，【必须手动删掉所有内联script标签和自动绑定的onclick属性】，只保留结构和样式。这一步跳过会导致后续JS控制逻辑被覆盖或冲突。
将生成的HTML粘贴进文件，保存。
手写JavaScript控制逻辑
在同目录下新建carousel.js，写入以下内容：
第一步：定义轮播状态变量
声明let currentIndex = 0;和const totalItems = 3;，这两个值必须与HTML中图片数量严格一致，否则指示点会错位或切换越界。
Agents 正在你的整个代码库中处理越来越复杂、运行时间更长的任务。本次版本引入了新的 agent 框架改进，以实现更好的上下文管理，并在编辑器和 CLI 中带来了许多提升使用体验的修复。
第二步：实现切换函数
写function goToSlide(index) { ... }，内部用document.querySelector('.carousel-inner').style.transform = `translateX(-${index * 100}%)`控制位移。注意这里用的是百分比位移，不是像素值，否则响应式下会失效。
第三步：绑定左右箭头事件
给左箭头元素添加click监听，触发goToSlide((currentIndex - 1 + totalItems) % totalItems)；右箭头同理，用(currentIndex + 1) % totalItems。括号里的加减模运算不可省略，否则边界索引会变成-1或3，导致空白页。
第四步：初始化并挂载事件
在DOMContentLoaded里调用goToSlide(0)，再用querySelectorAll('.carousel-dot')遍历绑定点击事件——每个点要传入对应索引，别写成闭包陷阱里的i值。
补全CSS交互细节
打开carousel.css，找到轮播容器的.carousel-inner选择器，在其声明块中追加：transition: transform 0.4s ease-in-out;。没有这行，切换就是瞬切，毫无轮播感。
为指示点添加激活态样式：.carousel-dot.active { background: #007bff; }，并在JS的goToSlide函数末尾加上document.querySelectorAll('.carousel-dot').forEach(...)同步更新class。
最后检查图片宽高是否设为width: 100%; height: auto;，否则在移动端可能出现拉伸或留白。
