HTML5图片轮播可通过三种方式实现：一、JavaScript定时器控制src切换并支持淡入淡出；二、CSS动画配合@keyframes实现无JS自动播放；三、JS与CSS结合，增加暂停、跳转、指示点等交互功能。
如果希望在HTML5页面中实现图片轮播效果，可通过JavaScript定时器控制图片切换，或利用CSS动画配合关键帧实现自动播放。以下是两种独立可行的技术路径：
一、使用JavaScript定时器实现图片轮播
该方法通过setInterval周期性修改当前显示图片的src属性或切换可见性，具备良好的兼容性和精确控制能力。
1、在HTML中创建一个标签，并为其设置id，例如id="carousel-img"。
2、准备一个包含多张图片URL的数组，如const images = ["img1.jpg", "img2.jpg", "img3.jpg"]。
立即学习“前端免费学习笔记（深入）”；
3、声明一个索引变量index = 0，用于跟踪当前图片位置。
4、使用setInterval启动定时任务，间隔时间设为3000毫秒（即3秒）。
5、在定时器回调函数中，将images[index]赋值给document.getElementById("carousel-img").src。
6、执行index = (index + 1) % images.length，实现循环切换。
7、可选：添加淡入淡出效果，通过修改opacity样式并配合transition实现平滑过渡。
二、使用CSS动画实现图片轮播
该方法依赖CSS @keyframes定义图片序列的不透明度变化，无需JS逻辑，适合静态内容且对性能要求较高的场景。
1、在HTML中构建一个容器div，内部按顺序放置所有轮播图片，每张图片均为元素并设置相同class，如class="slide"。
2、为容器设置position: relative，为每张图片设置position: absolute、top: 0、left: 0，并统一宽高与overflow: hidden。
3、为每个.slide元素设置opacity: 0，并通过z-index区分图层顺序。
4、定义@keyframes carousel-animation，按时间百分比分别设置各图片opacity为1和0。
5、计算总动画时长，例如3张图每张停留3秒，则总时长为9秒；各图片在对应时间段内opacity=1，其余时间为0。
6、将动画应用到容器或首张图片上，设置animation-name、animation-duration、animation-iteration-count: infinite、animation-timing-function: step-end。
7、注意：CSS动画方式需预先确定图片数量，动态增删图片时需重新生成keyframes规则。
三、结合JS与CSS实现带交互控制的轮播
该方案融合前两者优势，在CSS动画基础上加入JavaScript控制暂停、播放、跳转等行为，提升用户体验。
1、为轮播容器添加data-playing="true"属性，初始设为true表示自动播放。
2、监听鼠标移入容器事件，调用clearInterval停止定时器，并设置data-playing="false"。
3、监听鼠标移出事件，重启定时器，并恢复data-playing="true"。
4、为左右箭头按钮绑定click事件，点击时手动更新当前索引并立即切换图片。
5、为指示点（dots）添加点击事件，点击任一指示点即跳转至对应序号图片。
6、切换图片时同步更新指示点的active类名，以视觉反馈当前状态。
7、关键提示：切换过程中应避免重复触发定时器，建议使用clearInterval后重新setInterval。
