如何仅用纯CSS制作流畅切换的点击式轮播图？

本文共计1402个文字，预计阅读时间需要6分钟。

前言：轮播图在项目中经常用到，但实际应用到的轮播图都比较简单，没有复杂的特效。这时候如果去引入swiper那些库的话，未免有点杀鸡用牛刀了。所以，不如自己动手写一个。

前言

轮播图经常会在项目里用到，但是实际上用到的轮播图都是比较简单的，没有复杂的特效，这个时候如果去引入swiper那些库的话，未免就有点杀鸡焉用牛刀了。

所以不如自己手写一个，而今天我要分享的一种写法也是我最近才发现的，发现写起来真的是很丝滑，只纯css就实现了呢！

可以先看看预览效果

预览地址：sunny-lucking.github.io/howToBuiMySwiper/myswiper.html

源码地址：github.com/Sunny-lucking/howToBuiMySwiper/blob/main/myswiper.html

HTML <label> 标签的 for 属性的用法及作用

for 属性规定 label 与哪个表单元素绑定,label的for属性要与绑定表单元素（input）的ID对应。绑定完成后可以通过点击label触发表单元素的默认属性。通俗的讲就是你绑定完了点lebel就相当于点击表单元素（input）。