HTML5无原生轮播功能，需借助TinySlider等JS插件实现；引入CDN脚本后，按指定HTML结构编写容器与图片项，DOM加载完成后调用tns()初始化，并正确配置autoplay等参数。
HTML5 本身不提供图片轮播功能，所谓“HTML5 调用 JS 插件”，本质是用标准 HTML5 文档结构 + 外部 JavaScript 库（如 Swiper、TinySlider、Owl Carousel 等）来实现轮播。直接写 <carousel> 或指望原生 <picture> 标签自动轮播，会失败。
怎么引入并初始化一个轻量轮播插件（以 TinySlider 为例）
TinySlider 是纯 JS、无依赖、支持 ES 模块和 UMD 的现代轮播库，适合新手快速集成。
- 下载或通过 CDN 引入：在
<head>或页面底部<script>标签中加入<script src="https://cdn.jsdelivr.net/npm/tinyslider@2/dist/min/tiny-slider.js"></script> - HTML 结构必须是带 class 的容器包裹
<div>列表项，例如：<div id="slider"> <div><img src="1.jpg" alt="1"></div> <div><img src="2.jpg" alt="2"></div> <div><img src="3.jpg" alt="3"></div> </div>
- JS 初始化必须等 DOM 加载完成后再执行，否则
document.getElementById('slider')返回 null；推荐放在<body>底部或用DOMContentLoaded事件包裹 - 调用
tns()函数时，container参数必须是有效 DOM 元素或选择器字符串（如'#slider'），漏写或写错 selector 是新手最常遇到的“没反应”原因
为什么轮播不自动播放？常见配置项说明
TinySlider 默认不自动播放，需显式开启；且部分配置相互影响，比如 autoplay 开启后，autoplayTimeout 和 autoplayHoverPause 才生效。
name wechat-article-writer-pro description 微信公众号文章完整生成技能（专业版）。输入主题即自动完成：信息调研、文章撰写（含章节配图）、5个备选爆款标题、封面图生成、带格式排版的DOCX文档输出。触发词：写公众号文章、生成公众号内容、做微信推文、公众号文章完整版。 agent_created true 微信公众号文章完整生成技能（专业版） 概述 本技能提供微信公众号文章从主题到成品的完整生成流程，在基础版之上增加：章节配图、DOCX 格式输出（含彩色重点文字和表格
-
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）失效 - 图片父级
<div>不要设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 说明脚本未加载成功），再查配置项拼写和类型是否匹配。
