网页图片轮播有三种主流实现方式：一、用Swiper插件，引入CSS/JS文件，构建swiper容器并初始化自动播放；二、用原生JavaScript定时器，通过数组和setInterval切换img的src；三、用纯CSS@keyframes配合radio实现无脚本轮播。
如果您希望在网页中实现图片轮播效果，HTML5 提供了多种方式来构建幻灯片功能。以下是使用 Swiper 插件和原生 JavaScript 定时器两种主流方法的具体操作步骤：
一、使用 Swiper 插件制作幻灯片
Swiper 是一个开源、高性能、移动端友好的滑动插件，支持触摸拖拽、自动播放、分页器、导航按钮等完整幻灯片交互功能。引入 Swiper 后，仅需少量 HTML 结构与初始化代码即可启用。
1、在页面 <head> 中引入 Swiper 的 CSS 文件：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
2、在页面底部 <body> 末尾引入 Swiper 的 JS 文件：
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
立即学习“前端免费学习笔记（深入）”；
3、在 HTML 中编写 Swiper 容器结构，包含轮播图片列表与分页器容器：
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="image1.jpg" alt="幻灯片1"></div>
<div class="swiper-slide"><img src="image2.jpg" alt="幻灯片2"></div>
<div class="swiper-slide"><img src="image3.jpg" alt="幻灯片3"></div>
</div>
<div class="swiper-pagination"></div>
</div>
4、添加初始化脚本，启用自动播放与分页器：
<script>
const swiper = new Swiper('.swiper', {
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false
},
pagination: {
el: '.swiper-pagination',
clickable: true
}
});
</script>
5、确保图片尺寸适配容器，可在 CSS 中设置：
.swiper-slide img { width: 100%; height: auto; display: block; }
二、使用原生 JavaScript 定时器制作幻灯片
不依赖第三方库时，可通过数组存储图片路径，结合 setInterval 控制切换节奏，并动态更新 <img> 元素的 src 属性实现基础轮播。该方法轻量、可控性强，适合学习 DOM 操作原理。
1、在 HTML 中准备一个用于显示图片的容器：
<div id="slider-container">
<img id="slider-img" src="image1.jpg" alt="当前幻灯片">
</div>
2、定义图片路径数组：
<script>
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let currentIndex = 0;
const imgElement = document.getElementById('slider-img');
</script>
3、编写切换函数，更新图片并处理索引循环：
function changeImage() {
currentIndex = (currentIndex + 1) % images.length;
imgElement.src = images[currentIndex];
}
4、启动定时器，每 3 秒执行一次切换：
setInterval(changeImage, 3000);
5、为提升体验，可添加淡入淡出过渡效果，在 CSS 中加入：
#slider-img { transition: opacity 0.5s ease-in-out; }
三、使用 CSS @keyframes 实现纯 HTML/CSS 幻灯片
完全脱离 JavaScript 时，可利用 CSS 动画与 input[type="radio"] 控制幻灯片状态，通过相邻兄弟选择器与动画延迟实现自动轮播。该方案无脚本依赖，兼容性良好，适用于静态展示场景。
1、在 HTML 中按顺序排列 radio 控件与对应图片容器：
<div class="css-slider">
<input type="radio" name="slide" id="s1" checked>
<input type="radio" name="slide" id="s2">
<input type="radio" name="slide" id="s3">
<div class="slides">
<div class="slide" id="slide1"><img src="image1.jpg"></div>
<div class="slide" id="slide2"><img src="image2.jpg"></div>
<div class="slide" id="slide3"><img src="image3.jpg"></div>
</div>
</div>
2、隐藏 radio 元素，仅保留其控制逻辑：
.css-slider input { display: none; }
3、设置所有 slide 初始为透明且不可见：
.slide { opacity: 0; position: absolute; transition: opacity 0.5s; }
4、为每个选中状态定义对应图片可见样式：
#s1:checked ~ .slides #slide1,
#s2:checked ~ .slides #slide2,
#s3:checked ~ .slides #slide3 { opacity: 1; }
5、添加自动切换动画：定义 9s 总周期，每张图停留 3s，通过 @keyframes 配合 animation-delay 实现循环：
@keyframes css-slideshow {
0% { opacity: 0; }
1% { opacity: 1; }
33% { opacity: 1; }
34% { opacity: 0; }
}
.slide { animation: css-slideshow 9s infinite; }
#slide1 { animation-delay: 0s; }
#slide2 { animation-delay: 3s; }
#slide3 { animation-delay: 6s; }
