今天我们来做一个类似b站首页的轮播图，话不多说，先看一下成品
一.准备工作
1.先创建一个专门放图片的文件夹，方便咱们能够引入这些图片，并设置好编号
2.然后创建出存放这几个图片的标签
3.为其图片设置样式
.img-list{
/*设置图片的容器*/
/* float: left; */
width: 590px;
height: 520px;
margin: 100px auto
;
/* 为ul开启相对定位，目的是使ul中的pointer可以相对于ul定位，而不是相对于出示包含块定位 */
position: relative;
}
注：如果想要在页面上显示出你想选择的图片可以提高你所选择的那张图片的层级
/* 通过修改元素的层级来显示指定的图片 */
.img-list li:nth-child(){
z-index: 1;
}
4.如何设置切换点
先创建出八个点的a标签
在div容器中放入点
<div class="pointer">
<a class="active" href="JavaScript"></a>
<a href="JavaScript"></a>
<a href="JavaScript"></a>
<a href="JavaScript"></a>
<a href="JavaScript"></a>
<a href="JavaScript"></a>
<a href="JavaScript"></a>
<a href="JavaScript"></a>
<a href="JavaScript"></a>
</div>
设置点的宽高
.pointer a{
width: 15px;
height: 15px;
/* 使点向左浮动 */
float: left;
/* 设置图形为圆形 */
border-radius: 50%;
/* 左右间距为4 */
margin: 0 4px;
/* 将背景颜色设置到内容区，边框和内边距不再背景颜色 */
background-clip: content-box;
background-color:rgba(255, 255, 255, .3)
}
注意：在为开启浮动之前，该元素为行内元素，应该先切换为块元素才可以进行设置宽高，但是又由于当你给他设置浮动的时候可以转换为浮动也有一样的效果，所以可以直接转为浮动元素
给div开启绝对定位方便显示出点
.pointer{
/*给div开绝对定位*/
position: absolute;
/* 设置点的优先级使得不会被图片覆盖 */
z-index: 999;
left: 20px;
bottom: 10px;
}
设置li开启相对定位可以使远点落到图片上，并可以随意改变位置
position: relative;
设置原点鼠标移入状态
.pointer a.active,
/* 设置鼠标在每个点上移动都会变色 */
.pointer a:hover{
background-color: #fff;
border: 2px solid rgba(255, 255, 255, .3);
}
最后献上总代码
<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>
<link rel="stylesheet" href="./css/reset.css">
</head>
<style>
.img-list{
/*设置图片的容器*/
/* float: left; */
width: 590px;
height: 520px;
margin: 100px auto;
/* 为ul开启相对定位，目的是使ul中的pointer可以相对于ul定位，而不是相对于出示包含块定位 */
position: relative;
}
/* 设置li，让所有图片落到一起（脱离文档流即可） */
.img-list li{
position: absolute;
}
/* 通过修改元素的层级来显示指定的图片 */
.img-list li:nth-child(){
z-index: 1;
}
/* 设置导航点的样式 */
.pointer{
/*给div开绝对定位*/
position: absolute;
/* 设置点的优先级使得不会被图片覆盖 */
z-index: 999;
left: 20px;
bottom: 10px;
}
.pointer a{
width: 15px;
height: 15px;
/* 使点向左浮动 */
float: left;
/* 设置图形为圆形 */
border-radius: 50%;
/* 左右间距为4 */
margin: 0 4px;
/* 将背景颜色设置到内容区，边框和内边距不再背景颜色 */
background-clip: content-box;
background-color:rgba(255, 255, 255, .3)
}
.pointer a.active,
/* 设置鼠标在每个点上移动都会变色 */
.pointer a:hover{
background-color: #fff;
border: 2px solid rgba(255, 255, 255, .3);
}
</style>
<body>
<ul class="img-list">
<li><a href="javascript"></a><img src="./img/04/6.webp" a></li>
<li><a href="javascript"></a><img src="./img/04/2.webp" a></li>
<li><a href="javascript"></a><img src="./img/04/3.webp" a></li>
<li><a href="javascript"></a><img src="./img/04/4.webp" a></li>
<li><a href="javascript"></a><img src="./img/04/5.webp" a></li>
<li><a href="javascript"></a><img src="./img/04/1.webp" a></li>
<!-- 放入点-->
<div class="pointer">
<a class="active" href="JavaScript"></a>
<a href="JavaScript"></a>
<a href="JavaScript"></a>
<a href="JavaScript"></a>
<a href="JavaScript"></a>
<a href="JavaScript"></a>
<a href="JavaScript"></a>
<a href="JavaScript"></a>
<a href="JavaScript"></a>
</div>
</ul>
</body>
</html>
总结
今天的轮播图因为还没加入js的元素，导致在演示的效果上面还有很多缺陷，无法让他实现自动或者手动播放，日后我也会慢慢将其完善，现在能做出的也只有一点外面的骨架
