纯css实现轮播图（自动轮播）效果_☆*往事随風*☆的博客
纯css实现轮播图效果
文章目录
-
- 纯css实现轮播图效果
- 一、前言
- 二、基本思路
- 三、实现步骤
-
- 1.创建一个容器来进行轮播图的展示
- 2.创建一个容器来存储图片
- 3.在存储容器中放入图片
- 4.为图片设置动画
- 5.效果展示
- 6.整体代码
- 四、总结
一、前言
轮播图在网页中是一种必不可少的元素，轮播图的使用，使网页的内容展示更加生动，大大提高了用户体验，一般我们都会使用js来实现这一功能，但今天我们主要介绍一下如何使用css来实现网页轮播图的功能。
二、基本思路
所谓的轮播图，其实就是多张图片按照一定的时间和顺序依次从某个窗口来向用户展示，这就类似于舞台剧表演，支撑轮播图的内容进行展示的元素就相当于舞台，而轮播图展示的内容就是各个演员的表演，图片存储的地方就相当于舞台后边的演员准备区。那么，有了这样一个基本思路，类比着舞台剧的表演过程，我们就可以构思出，使用css来实现轮播图的一个基本方法。三、实现步骤
1.创建一个容器来进行轮播图的展示
这一步就相当于“舞台”的搭建，只有有了“舞台”我们才能对我们的表演进行展示。
html代码如下（示例）：
<div class="demo">
div>
css代码如下（示例）：
.demo{
width:1200px;
height:400px;
margin:0px auto;/*轮播图居中*/
/* background-color:aquamarine; */
overflow: hidden;/*用于隐藏超出展示容器的内容部分*/
}
注释：这里我们以轮播图一张一张的进行展示，所以我们容器的宽度和高度要和我们进行展示的图片的高度和宽度保持一致，这样我们轮播图就能一张一张的显示，由于我们的展示窗口只能展示一张图片，所以还需要使用overflow:hidden来隐藏其余超出窗口部分的图片。
2.创建一个容器来存储图片
这一步就相当于“后台”的搭建，“后台”是干什么的?“后台”就是专门用来给演员们准备和休息的地方，我们的轮播图也一样，也需要一个地方来将我们的图片进行一个存放和准备。
代码如下（示例）：
<div class="demo">
<div class="demo1">
div>
div>
css代码如下（示例）：
.demo1{
width:6000px;
height:400px;
margin:0px auto;
font-size:0px;/*消除图片间隔*/
}
注释：作为我们的图片存储区域，它的宽度应该是所有图片的宽度之和，高度的话应该和图片的高度一致，这样才能保证图片能够全部存入，又不浪费资源（这里以五张图片为例）。
3.在存储容器中放入图片
有了“舞台”和“后台”，我们还需要一个关键的元素，那就是我们的“演员”，也就是轮播图的展示图片。
html代码如下（示例）：
<div class="demo1">
<img src="../img/banner/banner02.png" alt=""/>
<img src="../img/banner/banner03.png" alt=""/>
<img src="../img/banner/banner04.png" alt=""/>
<img src="../img/banner/banner05.png" alt=""/>
<img src="../img/banner/banner01.png" alt=""/>
div>
css代码如下（示例）：
.demo1 img{
width:1200px;
height:400px;
float:left;/*开启浮动*/
}
注释：这里我们要为图片开启浮动，这样图片就会排成一行，以便我们进行轮播图的横向展示。
4.为图片设置动画
这一步就像当于演员表演的动作，我们要为图片添加上动画，这样图片才能动起来，进而实现图片轮播的效果。
html代码如下（示例）：
.demo1{
width:6000px;
height:400px;
margin:0px auto;
animation:text 30s infinite linear;
font-size:0px;/*消除图片间隔*/
}
@keyframes text { /*0%-20%是播放下一个图片，0%-10%是图片暂停的时间*/
0%,10%{
margin-left:0px;
}
20%,30%{
margin-left:-1200px;
}
40%,50%{
margin-left:-2400px;
}
60%,70%{
margin-left:-3600px;
}
80%,90%{
margin-left:-4800px;
}
}
注释：这里需要注意的就是动画关键帧的设置，关键帧的设置决定了你的轮播图的播放和暂停。因为我们准备了5张图片，所以我在这里设置了五个范围。
5.效果展示
素材来自小米官网
6.整体代码
html代码如下（示例）：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/轮播图.css">
<title>轮播图title>
head>
<body>
<div class="demo">
<div class="demo1">
<img src="../img/banner/banner02.png" alt=""/>
<img src="../img/banner/banner03.png" alt=""/>
<img src="../img/banner/banner04.png" alt=""/>
<img src="../img/banner/banner05.png" alt=""/>
<img src="../img/banner/banner01.png" alt=""/>
div>
div>
body>
html>
css代码如下（示例）：
/*
轮播图demo
*/
.demo{
width:1200px;
height:400px;
margin:0px auto;
/* background-color:aquamarine; */
overflow: hidden;/*用于隐藏超出展示容器的内容部分*/
}
.demo1{
width:6000px;
height:400px;
margin:0px auto;
animation:text 30s infinite linear;
font-size:0px;/*消除图片间隔*/
}
.demo1 img{
width:1200px;
height:400px;
float:left;
}
@keyframes text { /*0%-20%是播放下一个图片，0%-10%是图片暂停的时间*/
0%,10%{
margin-left:0px;
}
20%,30%{
margin-left:-1200px;
}
40%,50%{
margin-left:-2400px;
}
60%,70%{
margin-left:-3600px;
}
80%,90%{
margin-left:-4800px;
}
}
四、总结
1.首先进行轮播图展示容器的搭建，宽度和高度要和图片保持一致。
2.存储图片容器搭建，要求宽度为所有图片的宽度之和，高度和图片保持一致。
3.要为图片开启浮动（并不是唯一方法），使图片排成一行。
4.为图片设置动画，使图片动起来。