纯HTML无法实现图片自动淡入淡出轮播，需CSS动画或轻量JS配合：CSS方案适用于固定张数（如3张），通过opacity+animation-delay实现循环；JS方案更灵活，支持任意张数、暂停/切换及预加载等增强体验功能。
用纯 HTML 无法直接实现图片自动淡入淡出的循环展示，必须配合 CSS 动画和少量 JavaScript（或仅用 CSS 配合 @keyframes + animation 实现基础轮播）。下面提供两种实用、易懂、可直接运行的方案：一种纯 CSS 实现（适合固定张数、简单场景），一种轻量 JS 方案（更灵活、兼容性好、便于控制）。
纯 CSS 方案（3–5 张图，无交互）
核心思路：利用 opacity 和 animation 控制多张图片的透明度叠加与切换，通过绝对定位让它们重叠显示。
- 所有图片放在同一容器内，设为
position: absolute，尺寸一致 - 用
@keyframes定义 opacity 变化，每个图片在不同时间段显示（例如每张占 25% 动画时长） - 设置
animation-iteration-count: infinite实现循环
示例（3 张图，总周期 9s，每张显示 3s）：
轻量 JavaScript 方案（推荐，支持任意张数+暂停/手动切换）
用 JS 控制当前图片索引，配合 CSS 过渡（transition: opacity 0.6s ease）实现平滑淡入淡出，逻辑清晰、易于扩展。
立即学习“前端免费学习笔记（深入）”；
- HTML 中只需一个
<img alt="HTML怎么实现图片自动淡入淡出的循环展示" >标签，src 动态更新 - CSS 设置 opacity 和 transition
- JS 使用
setInterval切换图片，配合淡出→淡入动画（先设 opacity=0，延时后改 src 再设 opacity=1）
关键代码片段：
<script><br> const images = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"];<br> let index = 0;<br> const img = document.getElementById("slider");<br> <br> function changeImage() {<br> img.style.opacity = 0;<br> setTimeout(() => {<br> index = (index + 1) % images.length;<br> img.src = images[index];<br> img.style.opacity = 1;<br> }, 600); // 匹配 transition 时长<br> }<br> <br> setInterval(changeImage, 4000); // 每 4 秒切一张<br> </script>
小提示：提升体验的关键细节
-
预加载图片：避免切换时白屏，可在 JS 初始化时新建
Image()对象提前加载 -
鼠标悬停暂停：给容器加
onmouseenter="clearInterval(timer)"和onmouseleave恢复 -
无障碍支持：为
<img alt="HTML怎么实现图片自动淡入淡出的循环展示" >添加alt，并考虑用aria-live提示变化（如轮播中） -
响应式适配：用
max-width: 100%或object-fit: cover确保不同屏幕下正常显示
不建议的做法
完全依赖 visibility: hidden 或 display: none 切换——会导致过渡失效；用大量 inline style 拼接动画——难维护；或在没有 fallback 的情况下只用 CSS 自定义属性动画（兼容性受限）。
