一、什么是轮播图
轮播图其实就是将照片水平放置，设置一个只有显示一张照片大小的窗口，多张图片重复播放形成。
二、轮播图的基本功能：
第一，能够左右切换。
第二，自动播放。
第三，按下面的按钮能够跳转到固定页面。
第四，当把鼠标放在图上时，轮播停止。
三、如何做轮播图
具体操作如下：
<!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">
<title>Document</title>
<style>
.box{
position: relative;
}
.box > img{
width: 100%;
}
.left-icon,
.right-icon{
width: 50px;
height: 50px;
background-color: rgba(255, 204, 0, 0.6);
font-size: 30px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.left-icon{
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
position: absolute;
left: 0px;
top: calc(50% - 50px);
}
.right-icon{
border-bottom-left-radius: 50%;
border-top-left-radius: 50%;
position: absolute;
right: 0;
top: calc(50% - 50px);
}
.circle-box{
position: absolute;
bottom: 20px;
left: calc(50% - 100px);
background-color: #333;
width: 200px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.circle-box > span{
display: flex;
width: 10px;
height: 10px;
border: 1px solid white;
margin: 0 10px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">
<img src="https://t7.baidu.com/it/u=308796380,4027222542&fm=193&f=GIF">
<div class="left-icon"><</div>
<div class="right-icon">></div>
<div class="cricle-box">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>