纯css实现轮播图（自动轮播和手动轮播）效果_☆往事随風☆的博客

☆*往事随風*☆

已于 2023-06-26 23:09:55 修改

阅读量9.8w

点赞数 178

分类专栏：前端文章标签： html css css3

于 2021-04-03 16:23:46 首次发布

本文链接：https://blog.csdn.net/m0_47214030/article/details/115415959

版权

前端专栏收录该内容

15 篇文章 10 订阅

订阅专栏

纯css实现轮播图效果

文章目录

- 纯css实现轮播图效果
一、前言
二、效果展示
三、基本思路
四、自动轮播
五、手动轮播
六、总结
七、项目源码

🚀 欢迎访问我的博客：https://wk-blog.vip

一、前言

轮播图在网页中是一种必不可少的元素，轮播图的使用，使网页的内容展示更加生动，大大提高了用户体验，一般我们都会使用js来实现这一功能，但今天我们主要介绍一下如何使用css来实现网页轮播图的功能。

二、效果展示

自动轮播在线演示：https://wk-china.gitee.io/rotation-chart/auto.html

在这里插入图片描述

手动轮播在线演示：https://wk-china.gitee.io/rotation-chart/manual

在这里插入图片描述

三、基本思路

所谓的轮播图，其实就是多张图片按照一定的时间和顺序依次从某个窗口来向用户展示，这就类似于舞台剧表演，支撑轮播图的内容进行展示的元素就相当于舞台，而轮播图展示的内容就是各个演员的表演，图片存储的地方就相当于舞台后边的演员准备区。那么，有了这样一个基本思路，类比着舞台剧的表演过程，我们就可以构思出，使用css来实现轮播图的一个基本方法。

四、自动轮播

4.1、创建一个容器来进行轮播图的展示

这一步就相当于“舞台”的搭建，只有有了“舞台”我们才能对我们的表演进行展示。

html代码如下（示例）：

	<!-- 创建外部展示容器 -->
	<div class="banner-container">
	
	</div>

css代码如下（示例）：

.banner-container{
	width:1200px;
	height:400px;
	/* 轮播图居中 */
	margin:1rem auto;
	/* 隐藏超出展示容器的内容 */
	overflow: hidden;
	position: relative;
}

这里我们以轮播图一张一张的进行展示，所以我们容器的宽度和高度要和我们进行展示的图片的高度和宽度保持一致，这样我们轮播图就能一张一张的显示，由于我们的展示窗口只能展示一张图片，所以还需要使用overflow:hidden来隐藏其余超出窗口部分的图片。

4.2、创建一个容器来存储图片

这一步就相当于“后台”的搭建，“后台”是干什么的?“后台”就是专门用来给演员们准备和休息的地方，我们的轮播图也一样，也需要一个地方来将我们的图片进行一个存放和准备。

代码如下（示例）：

	<!-- 创建外部展示容器 -->
	<div class="banner-container">
		<!-- 创建图片存储容器 -->
		<div class="banner-img-container">
		
		</div>
	</div>

css代码如下（示例）：

.banner-container .banner-img-container {
	width:6000px;
	height:400px;
	overflow: hidden;
	position: absolute;
	/* 开启弹性盒，让图片横向排列 */
	display: flex;
	animation: run 10s ease infinite;
}

作为我们的图片存储区域，它的宽度应该是所有图片的宽度之和，高度的话应该和图片的高度一致，这样才能保证图片能够全部存入，又不浪费资源（这里以五张图片为例）。

4.3、在存储容器中放入图片

有了“舞台”和“后台”，我们还需要一个关键的元素，那就是我们的“演员”，也就是轮播图的展示图片。

html代码如下（示例）：

<!-- 创建外部展示容器 -->
	<div class="banner-container">
		<!-- 创建图片存储容器 -->
		<div class="banner-img-container">
			<img src="./img/banner01.png" alt="">
			<img src="./img/banner02.png" alt="">
			<img src="./img/banner03.png" alt="">
			<img src="./img/banner04.png" alt="">
			<img src="./img/banner05.png" alt="">
		</div>
	</div>

css代码如下（示例）：

.banner-container .banner-img-container img{
	width:1200px;
	height:100%;
}

图片的宽度和高度需要和展示窗口的宽度和高度保持一致

4.4、为图片设置动画

这一步就像当于演员表演的动作，我们要为图片添加上动画，这样图片才能动起来，进而实现图片轮播的效果。

html代码如下（示例）：


/* 轮播图关键帧 */
/* 自动轮播 */
@keyframes run {
	0%,10%{
		/* margin-left: 0; */
		transform: translateX(0);
	}
	20%,30%{
		/* margin-left: -1200px;; */
		transform: translateX(-1200px);
	}
	40%,50%{
		/* margin-left: -2400px; */
		transform: translateX(-2400px);
	}
	60%,70%{
		/* margin-left: -3600px; */
		transform: translateX(-3600px);
	}
	80%,90%{
		/* margin-left: -4800px; */
		transform: translateX(-4800px);
	}
	100%{
		/* margin-left: 0; */
		transform: translateX(0);
	}
}

要使轮播图动起来可以通过关键帧来设置图片的 margin-left 的偏移量或者 translateX 的偏移量。

4.5、整体代码

html代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>纯CSS实现轮播图(自动轮播)</title>
	<link rel="stylesheet" href="./css/reset.css">
	<link rel="stylesheet" href="./css/autoMatic.css">
</head>

<body>
	<!-- 创建外部展示容器 -->
	<div class="banner-container">
		<!-- 创建图片存储容器 -->
		<div class="banner-img-container">
			<img src="./img/banner01.png" alt="">
			<img src="./img/banner02.png" alt="">
			<img src="./img/banner03.png" alt="">
			<img src="./img/banner04.png" alt="">
			<img src="./img/banner05.png" alt="">
		</div>
	</div>
</body>

</html>

css代码如下（示例）：


/* 自动轮播样式 */
.banner-container{
	width:1200px;
	height:400px;
	/* 轮播图居中 */
	margin:1rem auto;
	/* 隐藏超出展示容器的内容 */
	overflow: hidden;
	position: relative;
}

.banner-container .banner-img-container {
	width:6000px;
	height:400px;
	overflow: hidden;
	position: absolute;
	/* 开启弹性盒，让图片横向排列 */
	display: flex;
	animation: run 10s ease infinite;
}

.banner-container .banner-img-container img{
	width:1200px;
	height:100%;
}

/* 动画关键帧 */
@keyframes run {
	0%,10%{
		/* margin-left: 0; */
		transform: translateX(0);
	}
	20%,30%{
		/* margin-left: -1200px;; */
		transform: translateX(-1200px);
	}
	40%,50%{
		/* margin-left: -2400px; */
		transform: translateX(-2400px);
	}
	60%,70%{
		/* margin-left: -3600px; */
		transform: translateX(-3600px);
	}
	80%,90%{
		/* margin-left: -4800px; */
		transform: translateX(-4800px);
	}
	100%{
		/* margin-left: 0; */
		transform: translateX(0);
	}
}

五、手动轮播

5.1、轮播图容器

<div class="banner-container">
		<!-- 轮播图圆点 -->
		<input type="radio" name="radio-set" checked="checked" id="banner-control-1">
		<a class="banner-nav-a" href="#banner01"></a>
		<input type="radio" name="radio-set" id="banner-control-2">
		<a class="banner-nav-a" href="#banner02"></a>
		<input type="radio" name="radio-set" id="banner-control-3">
		<a class="banner-nav-a" href="#banner03"></a>
		<input type="radio" name="radio-set" id="banner-control-4">
		<a class="banner-nav-a" href="#banner04"></a>
		<input type="radio" name="radio-set" id="banner-control-5">
		<a class="banner-nav-a" href="#banner05"></a>
		<!-- 轮播图图片容器-->
		<div class="banner-img-container">
			<img id="banner01" src="./img/banner01.png" alt="">
			<img id="banner02" src="./img/banner02.png" alt="">
			<img id="banner03"  src="./img/banner03.png" alt="">
			<img id="banner04" src="./img/banner04.png" alt="">
			<img id="banner05" src="./img/banner05.png" alt="">
		</div>
	</div>

手动轮播利用 input 的 checked 状态来为 a 标签添加选中状态，通过 a 标签链接 ,布局方式采用的是 input + a 标签，不可以添加父级，不然css无法选择到 banner-img-container

5.2、轮播图容器样式

.banner-container{
	width:1200px;
	height:400px;
	margin:1rem auto;
	overflow: hidden;
	position: relative;
}

.banner-container .banner-img-container {
	width:6000px;
	height:400px;
	overflow: hidden;
	position: absolute;
	display: flex;
	transition: transform 0.6s ease;
}

.banner-container .banner-img-container  img{
	width:100%;
	height:100%;
}

5.3、轮播图圆点样式

/* 轮播图圆点样式 */
.banner-container a {
	width:24px;
	height:24px;
	background:#87c8eb;
	position: absolute;
	bottom:1rem;
	border-radius: 100%;
	margin:0;
	z-index: 1;
}

.banner-container input{
	width:24px;
	height:24px;
	position: absolute;
	bottom:1rem;
	margin:0;
	cursor: pointer;
	z-index: 2;
	opacity: 0;
}
/* 设置导航圆点偏移量（居中布局）*/
#banner-control-1,#banner-control-1 + .banner-nav-a{
    left: 30%;
}
#banner-control-2,#banner-control-2 + .banner-nav-a{
    left: 40%;
}
#banner-control-3,#banner-control-3 + .banner-nav-a{
    left: 50%;
}
#banner-control-4,#banner-control-4 + .banner-nav-a{
    left: 60%;
}
#banner-control-5,#banner-control-5 + .banner-nav-a{
    left: 70%;
}

5.4、设置圆点高亮

/* 设置高亮 */
/*当 input 被选中时 他的兄弟级a标签高亮展示*/
input:checked + .banner-nav-a {
    background-color: #ad244f;
}

通过监测被选中的 input 标签来为其兄弟级 a 标签设置高亮样式，以此来实现轮播图圆点点击高亮效果。

5.5、设置动画

/* 设置轮播图动画 */
#banner-control-1:checked ~ .banner-img-container{
	transform: translateX(0px);
}
#banner-control-2:checked ~ .banner-img-container{
	transform: translateX(-1200px);
}
#banner-control-3:checked ~ .banner-img-container{
	transform: translateX(-2400px);
}
#banner-control-4:checked ~ .banner-img-container{
	transform: translateX(-3600px);
}
#banner-control-5:checked ~ .banner-img-container{
	transform: translateX(-4800px);
}

通过 input 的checked状态来为 轮播图图片容器 添加动画

5.6、整体代码

html代码示例

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>纯CSS实现轮播图(手动轮播)</title>
	<link rel="stylesheet" href="./css/reset.css">
	<link rel="stylesheet" href="./css/manual.css">
</head>

<body>
	<div class="banner-container">
		<!-- 这里利用input的checked状态来为a标签添加选中状态 -->
        <!-- 布局方式采用的是 input + a 标签，不可以添加父级，不然css无法选择到 banner-img-container -->
		<!-- 轮播图圆点 -->
		<input type="radio" name="radio-set" checked="checked" id="banner-control-1">
		<a class="banner-nav-a" href="#banner01"></a>
		<input type="radio" name="radio-set" id="banner-control-2">
		<a class="banner-nav-a" href="#banner02"></a>
		<input type="radio" name="radio-set" id="banner-control-3">
		<a class="banner-nav-a" href="#banner03"></a>
		<input type="radio" name="radio-set" id="banner-control-4">
		<a class="banner-nav-a" href="#banner04"></a>
		<input type="radio" name="radio-set" id="banner-control-5">
		<a class="banner-nav-a" href="#banner05"></a>
		<!-- 轮播图图片容器 -->
		<div class="banner-img-container">
			<img id="banner01" src="./img/banner01.png" alt="">
			<img id="banner02" src="./img/banner02.png" alt="">
			<img id="banner03"  src="./img/banner03.png" alt="">
			<img id="banner04" src="./img/banner04.png" alt="">
			<img id="banner05" src="./img/banner05.png" alt="">
		</div>
	</div>
</body>

</html>

css示例代码


/* 手动轮播样式 */
.banner-container{
	width:1200px;
	height:400px;
	margin:1rem auto;
	overflow: hidden;
	position: relative;
}

.banner-container .banner-img-container {
	width:6000px;
	height:400px;
	overflow: hidden;
	position: absolute;
	display: flex;
	transition: transform 0.6s ease;
}

.banner-container .banner-img-container  img{
	width:100%;
	height:100%;
}

/* 轮播图圆点样式 */
.banner-container a {
	width:24px;
	height:24px;
	background:#87c8eb;
	position: absolute;
	bottom:1rem;
	border-radius: 100%;
	margin:0;
	z-index: 1;
}

.banner-container input{
	width:24px;
	height:24px;
	position: absolute;
	bottom:1rem;
	margin:0;
	cursor: pointer;
	z-index: 2;
	opacity: 0;
}

/* 设置导航圆点偏移量（居中布局）*/
#banner-control-1,#banner-control-1 + .banner-nav-a{
    left: 30%;
}
#banner-control-2,#banner-control-2 + .banner-nav-a{
    left: 40%;
}
#banner-control-3,#banner-control-3 + .banner-nav-a{
    left: 50%;
}
#banner-control-4,#banner-control-4 + .banner-nav-a{
    left: 60%;
}
#banner-control-5,#banner-control-5 + .banner-nav-a{
    left: 70%;
}

/* 设置高亮 */
/*当 input 被选中时 他的兄弟级a标签高亮展示*/
input:checked + .banner-nav-a {
    background-color: #ad244f;
}

/* 设置轮播图动画 */
#banner-control-1:checked ~ .banner-img-container{
	transform: translateX(0px);
}
#banner-control-2:checked ~ .banner-img-container{
	transform: translateX(-1200px);
}
#banner-control-3:checked ~ .banner-img-container{
	transform: translateX(-2400px);
}
#banner-control-4:checked ~ .banner-img-container{
	transform: translateX(-3600px);
}
#banner-control-5:checked ~ .banner-img-container{
	transform: translateX(-4800px);
}

这里用到了 reset.css 来清除浏览器的默认样式，和我们的轮播图样式没有关系，reset.css 如下：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

六、总结

1.首先进行轮播图展示容器的搭建，宽度和高度要和图片保持一致。
2.存储图片容器搭建，要求宽度为所有图片的宽度之和，高度和图片保持一致。
3.要为图片开启浮动（并不是唯一方法），使图片排成一行。
4.为图片设置动画，使图片动起来。

七、项目源码

https://gitee.com/wk-china/rotation-chart

☆*往事随風*☆

关注

178
点赞
踩
552

收藏

觉得还不错? 一键收藏
打赏
35
评论
纯css实现轮播图（自动轮播和手动轮播）效果_☆*往事随風*☆的博客

纯css实现轮播图效果提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录纯css实现轮播图效果一、前言二、基本思路三、实现步骤1.创建一个容器来进行轮播图的展示2.创建一个容器来存储图片3.在存储容器中放入图片4.为图片设置动画5.效果展示6.整体代码四、总结一、前言轮播图在网页中是一种必不可少的元素，轮播图的使用，使网页的内容展示更加生动，大大提高了用户体验，一般我们都会使用js来实现这一功能，但今天我们主要介绍一下如何使用css来实现网页轮播图的功能。二、基本思路
复制链接

扫一扫