纯css实现轮播图效果
文章目录
纯css实现轮播图效果
一、前言二、效果展示三、基本思路四、自动轮播4.1、创建一个容器来进行轮播图的展示4.2、创建一个容器来存储图片4.3、在存储容器中放入图片4.4、为图片设置动画4.5、整体代码
五、手动轮播5.1、轮播图容器5.2、轮播图容器样式5.3、轮播图圆点样式5.4、设置圆点高亮5.5、设置动画5.6、整体代码
六、总结七、项目源码
🚀 欢迎访问我的博客：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代码如下（示例）：
css代码如下（示例）：
.banner-container{
width:1200px;
height:400px;
/* 轮播图居中 */
margin:1rem auto;
/* 隐藏超出展示容器的内容 */
overflow: hidden;
position: relative;
}
这里我们以轮播图一张一张的进行展示，所以我们容器的宽度和高度要和我们进行展示的图片的高度和宽度保持一致，这样我们轮播图就能一张一张的显示，由于我们的展示窗口只能展示一张图片，所以还需要使用overflow:hidden来隐藏其余超出窗口部分的图片。
4.2、创建一个容器来存储图片
这一步就相当于“后台”的搭建，“后台”是干什么的?“后台”就是专门用来给演员们准备和休息的地方，我们的轮播图也一样，也需要一个地方来将我们的图片进行一个存放和准备。
代码如下（示例）：
css代码如下（示例）：
.banner-container .banner-img-container {
width:6000px;
height:400px;
overflow: hidden;
position: absolute;
/* 开启弹性盒，让图片横向排列 */
display: flex;
animation: run 10s ease infinite;
}
作为我们的图片存储区域，它的宽度应该是所有图片的宽度之和，高度的话应该和图片的高度一致，这样才能保证图片能够全部存入，又不浪费资源（这里以五张图片为例）。
4.3、在存储容器中放入图片
有了“舞台”和“后台”，我们还需要一个关键的元素，那就是我们的“演员”，也就是轮播图的展示图片。
html代码如下（示例）：
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代码如下（示例）：
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、轮播图容器
手动轮播利用 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代码示例
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
