持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情
轮播图系列之：纯 CSS
轮播图在平常的网页开发中十分常见，特别是电商类的网站。
前端 “进化” 到今天，组件化的思想早已深入人心。
组件库的出现更是提高了不少的开发效率。网上对于程序员是否需要重新造轮子一直还是有争论的。
但不管争论如何，该学的东西还是得学。毕竟面试需要，工资重要啊。
可以说只要是个组件库，就会有轮播图组件，也有单独做 swpier 的插件。你当然可以选择直接现成的轮子，也可以自己造一个（生活已经很累了，你为什么还要给我增加负担 ）
卧槽，CSS 这么牛逼的吗？o(￣▽￣)ｄ，CSS yyds 👍👍👍👍
基础的 HTML 结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style>
* {
margin: 0;
padding: 0;
}
/*设置显示图片的大小，溢出隐藏*/
.slidershow {
width: 800px;
height: 600px;
overflow: hidden;
}
/*居中*/
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*实现块元素百分比下居中*/
}
/* 图片部分 */
.slides {
width: 1000%;
height: 100%;
display: flex;
}
.slide {
width: 10%;
transition: 1.5s;
}
.slide img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="slidershow middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked />
<input type="radio" name="r" id="r2" />
<input type="radio" name="r" id="r3" />
<input type="radio" name="r" id="r4" />
<div class="slide s1">
<img src="https://cdn.pixabay.com/photo/2020/09/20/10/08/mountain-5586606__340.jpg" alt="photo" />
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2020/09/11/17/01/landscape-5563684__340.jpg" alt="photo" />
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2020/09/23/15/10/street-5596262__340.jpg" alt="photo" />
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2020/09/24/18/00/man-5599377__340.jpg" alt="photo" />
</div>
</div>
</div>
</body>
</html>
下面的小点点，我们使用 label 标签实现。
label标签为 input 元素定义标注 "for"属性可把label绑定到另外一个元素。 "for" 属性的值设置为相关元素的 id 属性的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style>
* {
margin: 0;
padding: 0;
}
/*导航 设置绝对位置，弹性布局，按钮位置*/
.navigaion {
position: absolute;
bottom: 5px;
/*底部距离*/
left: 50%;
transform: translateX(-50%);
display: flex;
}
/*设置按钮属性*/
.bar {
width: 50px;
height: 10px;
border: 2px solid #FFF8DC;
margin: 0.375rem;
cursor: pointer;
transition: 0.4s;
}
.bar:hover {
background-color: #FFF8DC;
}
/*隐藏了按钮*/
input[name="r"] {
position: absolute;
visibility: hidden;
}
/* 绑定按钮 */
/* radio 标签与 img 相关联 */
#r1:checked~.s1 {
margin-left: 0;
}
#r2:checked~.s1 {
margin-left: -10%;
}
#r3:checked~.s1 {
margin-left: -20%;
}
#r4:checked~.s1 {
margin-left: -30%;
}
</style>
</head>
<body>
<div class="slidershow middle">
<!-- .... -->
<div class="navigaion">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
</div>
</div>
</body>
</html>
嘿嘿，下一期来一个更加厉害的。
