纯html无法实现广告自动轮播，必须用javascript配合setinterval控制切换逻辑，并处理悬停暂停、点击跳转、移动端适配等交互细节。
纯 HTML 无法设置广告自动轮播，必须用 JavaScript 控制定时切换逻辑。CSS 动画（如 @keyframes）能做视觉过渡，但不能响应点击跳转、悬停暂停或动态更新当前项——电商广告位这类强交互场景下，它基本不可用。
用 setInterval 启动自动轮播最直接
核心是定时调用切换函数，配合索引管理和 DOM 更新。不是“加个动画就完事”，而是确保每次只显示一张广告图、跳转链接准确、边界循环不卡顿。
-
setInterval的回调里必须先清除旧的active类，再给目标元素添加，否则多张图可能同时显示 - 初始状态要手动调用一次切换函数（比如
showSlide(0)），否则首帧可能空白或错位 - 轮播容器建议用
position: relative，每张广告图用position: absolute叠放，靠z-index或opacity控制显隐，比display: none/block更利于 CSS 过渡动画 - 时间间隔别设太短（如
1000），用户根本来不及看清文案和按钮；也别太长（如10000），容易被当成静态图忽略
鼠标悬停必须暂停，否则广告失效
用户把鼠标移到广告上想点链接，结果图突然切走——这是最典型的体验断点。暂停不是可选项，是硬性需求。
- 监听
mouseenter时用clearInterval停掉定时器，注意保存定时器 ID（比如let autoPlayId = setInterval(...)） -
mouseleave时不能直接复用原 ID，得重新setInterval，否则索引可能错乱（比如暂停时在第 2 张，恢复后从第 3 张开始切） - 移动端没有 hover，但需额外处理
touchstart/touchend，否则手指刚点到图片就切走了
广告图点击跳转要绑定到 img 外层容器
直接给 <img> 加 onclick 容易被轮播切换逻辑干扰（比如切换瞬间事件丢失），也难控制跳转行为（如新开 tab、带 utm 参数）。
- 把每张广告图包在
@#@#@#@#@#@#@#@#@#@0里，href写真实落地页，用target="_blank"避免跳出当前页 - 如果需要统计点击，就在
click事件里先event.preventDefault()，发请求后再window.open或location.href - 确保
<a></a>宽高撑满轮播项，否则点击热区太小，尤其在手机上容易点空
真正难的不是让图动起来，而是让动的过程不打断用户意图：暂停时机是否精准、跳转链接是否始终有效、移动端触摸反馈是否及时——这些细节没对齐，自动轮播就只是个会动的 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
