当前位置：首页 > 文章列表 > 文章 > 前端 > HTML5制作图片幻灯片教程详解

HTML5制作图片幻灯片教程详解

2026-01-21 17:51:50 0浏览收藏

一、使用 Swiper 插件制作幻灯片

Swiper 是一个开源、高性能、移动端友好的滑动插件，支持触摸拖拽、自动播放、分页器、导航按钮等完整幻灯片交互功能。引入 Swiper 后，仅需少量 HTML 结构与初始化代码即可启用。

1、在页面中引入 Swiper 的 CSS 文件：

2、在页面底部末尾引入 Swiper 的 JS 文件：

3、在 HTML 中编写 Swiper 容器结构，包含轮播图片列表与分页器容器：

4、添加初始化脚本，启用自动播放与分页器：

5、确保图片尺寸适配容器，可在 CSS 中设置：
.swiper-slide img { width: 100%; height: auto; display: block; }

二、使用原生 JavaScript 定时器制作幻灯片

不依赖第三方库时，可通过数组存储图片路径，结合 setInterval 控制切换节奏，并动态更新元素的 src 属性实现基础轮播。该方法轻量、可控性强，适合学习 DOM 操作原理。

1、在 HTML 中准备一个用于显示图片的容器：

2、定义图片路径数组：

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 控件与对应图片容器：

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; }

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

HTML5