|
各位小伙伴们，今天咱们来学习一下轮播图。轮播图是咱们写网页其中经常显现的一个效果，基本上各个网站上都会有这个效果。那样一说到轮播图大众脑子里的第1反应是不是用js来实现呀。 
那今天这篇文案呢咱们就不按常理出牌，不消js来写轮播图，而是利用纯css实现轮播图，听起来是不是很厉害的样子，纯css竟然能写出轮播图的效果，那样到底应该怎么写呢？接下来废话不多说，上代码。
最后实现的效果：
html代码
<!-- slide是轮播图区域 -->
<div class="slide">
<!-- swiper里面放的是 照片-->
<ul class="swiper">
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/1.jpg" alt=""></li>
</ul>
<!-- 这儿是轮播图上的小圆点 -->
<div class="circle">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div> 重视点：
第1点：想要实现没缝衔接，ul里面放的第1张图和最后一张图要一致。千万不要写错哦 ，能够看到我的第1个li里面放的是1.jpg，最后一个li亦是1.jpg。
第二点：带有类名active的是激活之后的实心白点。无带类名的便是默认的空心圆。总共有4张图轮播，所有创建了4个空心圆，当播放到第1张图的时候就把实心圆移动到第1个空心圆的位置，依次类推。
css代码：
.slide {
/* 写相对定位是
| 
发表于 2024-6-29 14:16:38
