当前位置：首页 > news >正文

前端轮播图几种不同实现方式

news 2025/10/29 7:39:20

前端轮播图是网页中常见的交互组件，用于循环展示多张图片或内容。

一、纯 CSS 实现轮播图

纯 CSS 实现轮播图主要利用 input 元素和 label 元素的交互，结合 animation 动画和 radio 单选框的特性来实现。

示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 轮播图容器 */.slider {width: 500px;height: 300px;margin: 0 auto;position: relative;overflow: hidden;}/* 图片容器 */.slides {width: 300%;height: 100%;display: flex;transition: transform 0.5s ease-in-out;}/* 单个图片 */.slide {width: 33.333%;height: 100%;}/* 隐藏 radio 按钮 */input[type="radio"] {display: none;}/* 导航点 */.navigation {position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);display: flex;}/* 导航点样式 */.navigation label {width: 10px;height: 10px;border-radius: 50%;background-color: rgba(255, 255, 255, 0.5);margin: 0 5px;cursor: pointer;}/* 控制图片切换 */#radio1:checked~.slides {transform: translateX(0);}#radio2:checked~.slides {transform: translateX(-33.333%);}#radio3:checked~.slides {transform: translateX(-66.666%);}</style>
</head><body><div class="slider"><!-- 图片 --><div class="slides"><div class="slide" style="background-color: red;"></div><div class="slide" style="background-color: green;"></div><div class="slide" style="background-color: blue;"></div></div><!-- 导航点 --><input type="radio" name="radio-btn" id="radio1" checked><input type="radio" name="radio-btn" id="radio2"><input type="radio" name="radio-btn" id="radio3"><div class="navigation"><label for="radio1"></label><label for="radio2"></label><label for="radio3"></label></div></div>
</body></html>

代码解释

HTML：创建了一个轮播图容器，包含图片容器和导航点。
CSS 部分：
- .slider 作为轮播图的容器，设置了宽度、高度和溢出隐藏。
- .slides 是图片的容器，宽度为 300% 以容纳多张图片，使用 flex 布局。
- 通过 input 的 checked 状态和 ~ 选择器来控制图片的切换。

二、JavaScript 实现轮播图

使用 JavaScript 可以实现更复杂的交互，如自动轮播、手动切换等。

示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 轮播图容器 */.slider {width: 500px;height: 300px;margin: 0 auto;position: relative;overflow: hidden;}/* 图片容器 */.slides {width: 300%;height: 100%;display: flex;}/* 单个图片 */.slide {width: 33.333%;height: 100%;}/* 导航按钮 */.prev,.next {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0, 0, 0, 0.5);color: white;padding: 10px;cursor: pointer;}.prev {left: 0;}.next {right: 0;}</style>
</head><body><div class="slider"><!-- 图片 --><div class="slides"><div class="slide" style="background-color: red;"></div><div class="slide" style="background-color: green;"></div><div class="slide" style="background-color: blue;"></div></div><!-- 导航按钮 --><span class="prev" onclick="plusSlides(-1)">&#10094;</span><span class="next" onclick="plusSlides(1)">&#10095;</span></div><script>let slideIndex = 1;showSlides(slideIndex);function plusSlides(n) {showSlides(slideIndex += n);}function showSlides(n) {let slides = document.getElementsByClassName("slide");if (n > slides.length) {slideIndex = 1;}if (n < 1) {slideIndex = slides.length;}for (let i = 0; i < slides.length; i++) {slides[i].style.transform = `translateX(-${(slideIndex - 1) * 100}%)`;}}</script>
</body></html>

代码解释

HTML 部分：创建了轮播图容器、图片容器和导航按钮。
CSS 部分：设置了轮播图的样式和导航按钮的样式。
JavaScript 部分：
- slideIndex 用于记录当前显示的图片索引。
- plusSlides 函数用于切换图片。
- showSlides 函数根据 slideIndex 来显示对应的图片。

三、使用第三方库实现轮播图

如 Swiper.js，它是一个强大的轮播图插件，提供了丰富的功能和配置选项。

示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入 Swiper 的 CSS 文件 --><link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"><style>/* 轮播图容器 */.swiper-container {width: 500px;height: 300px;}</style>
</head><body><!-- Swiper --><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" style="background-color: red;"></div><div class="swiper-slide" style="background-color: green;"></div><div class="swiper-slide" style="background-color: blue;"></div></div><!-- 如果需要导航按钮 --><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div><!-- 引入 Swiper 的 JavaScript 文件 --><script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script><script>// 初始化 Swipervar swiper = new Swiper('.swiper-container', {navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},});</script>
</body></html>