HTML5无原生轮播功能，需借助TinySlider等JS插件实现；引入CDN脚本后，按指定HTML结构编写容器与图片项，DOM加载完成后调用tns()初始化，并正确配置autoplay等参数。
HTML5 本身不提供图片轮播功能，所谓“HTML5 调用 JS 插件”，本质是用标准 HTML5 文档结构 + 外部 JavaScript 库（如 Swiper、TinySlider、Owl Carousel 等）来实现轮播。直接写
怎么引入并初始化一个轻量轮播插件（以 TinySlider 为例）
TinySlider 是纯 JS、无依赖、支持 ES 模块和 UMD 的现代轮播库，适合新手快速集成。
- 下载或通过 CDN 引入：在
或页面底部标签中加入 - HTML 结构必须是带 class 的容器包裹 列表项，例如：@@##@@@@##@@@@##@@
- JS 初始化必须等 DOM 加载完成后再执行，否则
document.getElementById('slider')返回 null；推荐放在底部或用DOMContentLoaded事件包裹- 调用
tns()函数时，container参数必须是有效 DOM 元素或选择器字符串（如'#slider'），漏写或写错 selector 是新手最常遇到的“没反应”原因为什么轮播不自动播放？常见配置项说明
TinySlider 默认不自动播放，需显式开启；且部分配置相互影响，比如
autoplay开启后，autoplayTimeout和autoplayHoverPause才生效。-
autoplay: true— 必须设为true（布尔值，不是字符串"true"） -
autoplayTimeout: 3000— 单位是毫秒，3000 = 3 秒；设太小（如 100）会导致视觉混乱 -
autoplayDirection: 'forward'— 可选'forward'或'backward'，默认正向 -
autoplayButtonOutput: false— 设为false可隐藏“播放/暂停”按钮（否则会在轮播下方插入额外 DOM） - 如果加了
controls: false却忘了关nav: false，小圆点导航仍会显示——这两个是独立开关
轮播图点击没反应、手势失效？检查这些兼容性细节
TinySlider v2 在移动端依赖
touchstart/touchmove事件，但某些环境（如 iOS Safari 的 iframe 嵌套、微信内置浏览器禁用部分 touch 行为）会拦截，导致拖拽卡死或点击跳转失败。立即学习“前端免费学习笔记（深入）”；
- 确保外层容器没有 CSS 属性
pointer-events: none，它会让所有交互（包括 touch）失效 - 图片父级 不要设
overflow: hidden以外的值，否则可能裁剪掉过渡动画中的临时克隆节点- 若在 Vue/React 等框架中使用，不要把轮播容器直接写在组件
v-if或useState切换区域里——DOM 销毁重建会导致tns()实例丢失，应改用v-show或手动destroy()+ 重建- IE11 不支持 TinySlider v2，如需兼容，得降级到 v1 或换用 Swiper 5（注意 Swiper 6+ 已放弃 IE 支持）
轮播看似简单，但实际踩坑多集中在 DOM 就绪时机、CSS 层叠干扰、插件实例生命周期管理这三点。别急着抄代码，先用浏览器开发者工具确认
tns()返回的对象是否存在、控制台有无报错（如TypeError: tns is not a function说明脚本未加载成功），再查配置项拼写和类型是否匹配。
- 若在 Vue/React 等框架中使用，不要把轮播容器直接写在组件
- JS 初始化必须等 DOM 加载完成后再执行，否则
