这是我自己做的一个简单的轮播图，效果图如下：
我觉得轮播图中最主要的是要理解到图片为什么会滑动，是怎么控制的。上面这个我自己做的，是搭好的一个结构，在无序列表中插入需要的图片。然后在插入图片的后面添加一个空的无序列表，作为轮播图中下方的小点。
代码语言：javascript复制<div class="box">
<ul class="imageList">
<li><img src="img/轮播1.jpg"/></li>
<li><img src="img/轮播2.jpg"/></li>
<li><img src="img/轮播3.jpg"/></li>
<li><img src="img/轮播4.jpg"/></li>
</ul>
<ul class="num">
</ul>
</div>然后就是css中书写样式了，首先肯定得把无序列表中的li从从上至下排列变为水平方向排列，也就是给li添加一个float属性；然后有一点需要注意，轮播图外面的大盒子必须设置为图片的大小，超出的隐藏，这样可以刚刚好显示出一张图片。然后装图片的ul的宽度必须大于或者等于所有图片总宽度。同样，这里也需要运用一个定位的知识，子绝父相。给class为box的盒子设置相对定位，装图片的ul设置绝对定位。这里，尽管轮播图下面几个点没有，但是我们要把样式先写好，然后后面通过JavaScript添加。
主要样式如下：
代码语言：javascript复制.box{
width: 500px;
height: 300px;
background-color: lightgrey;
margin-top: 30%;
overflow: hidden;
position: relative;
}
.imageList img{
width: 500px;
height: 300px;
}
.imageList{
width: 2500px;
list-style: none;
float: left;
position: absolute;
}
.imageList li{
float: left;
}
.box .num{
position: absolute;
width: 100%;
bottom: 10px;
left: 0;
text-align: center;
}
.box .num li{
width: 10px;
height: 10px;
background-color:white;
border-radius: 50%;
display: inline-block;
margin: 0px 3px;
cursor: pointer;
}
.box .num li.on{
background-col更多内容请见原文，文章转载自：https://blog.csdn.net/weixin_44519496/article/details/118599024
