分析

小米轮播图（左右按钮）

实现思路
需要五组input+label标签（且input标签的type为radio）
1
/* 第一个需带有checked，因为默认情况下选择的是第一个，也就是默认情况下第一个被选中 */
2
<input type="radio" name="slide" id="slide1" checked />
3
<input type="radio" name="slide" id="slide2" />
4
<input type="radio" name="slide" id="slide3" />
5
<input type="radio" name="slide" id="slide4" />
6
<input type="radio" name="slide" id="slide5" />
7
<label for="slide1" class="slide slide1"></label>
8
<label for="slide2" class="slide slide2"></label>
9
<label for="slide3" class="slide slide3"></label>
10
<label for="slide4" class="slide slide4"></label>
11
<label for="slide5" class="slide slide5"></label>
label标签的for属性与input标签的id属性相对应。也就是说当点击第一个label标签时，第一个input被选中,点击第二个label标签时，第二个input被选中……
在CSS上，默认图片透明度均为0，层级（z-index）默认也为0。
利用伪类选择器（:checked）来判断哪张图片应该被显示
简单来说就是当第一个input加入checked属性时(被选中时)，那么他的层级(z-index)与透明度则变为1。其他也是同理，因为默认的层级与透明度都是0，所以当选择另外input时刚才那个就会回到默认状态
左右按钮的实现
首先应该明确的是第几张图片出现时左右按钮应该指向哪一张图片。例如当显示第一张图片时左按钮应去向第五章，右按钮应去向第二张。
其次就是这些按钮应该随着不同图片的出现而变换，类似于一个按钮绑定一个图片。
图片左按钮右按钮
第一张图片第五张第二张
第二章图片第一张第三张
第三章图片第二张第四张
第四章图片第三张第五张
第五章图片第四张第一张
最后只需要用input是否被checked就可以判断哪一个label标签应该显示。

图片	左按钮	右按钮
第一张图片	第五张	第二张
第二章图片	第一张	第三张
第三章图片	第二张	第四张
第四章图片	第三张	第五张
第五章图片	第四张	第一张

在线显示地址：https://gethtml.cn/project/2020/03/17/index.html

由于演示图有点大，所以直接换成链接了。https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile1/imgbed/2020/03/17/20200317195705.gif

示例代码


x
1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>小米轮播图示例</title>
7
    <style>
8
      * {
9
        box-sizing: border-box;
10
      }
11
12
      body {
13
        margin: 0;
14
        padding: 0;
15
      }
16
17
      .container {
18
        width: 1226px;
19
        height: 460px;
20
        background: lightcyan;
21
        margin: 100px auto;
22
        position: relative;
23
      }
24
25
      .container .imgList {
26
        width: 100%;
27
        position: relative;
28
      }
29
30
      .container .imgList img {
31
        display: block;
32
        width: 100%;
33
        position: absolute;
34
        left: 0;
35
        top: 0;
36
        transition: opacity 1s;
37
        z-index: 0;
38
        opacity: 0;
39
      }
40
41
      .slide {
42
        width: 41px;
43
        height: 69px;
44
        background-image: url("http://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png");
45
        background-repeat: no-repeat;
46
        position: absolute;
47
        top: 50%;
48
        transform: translateY(-50%);
49
        z-index: 99;
50
        display: none;
51
        cursor: pointer;
52
      }
53
      /* 
54
    使用focus伪类模拟点击事件的效果
55
    1. html结构：必须有input 和 label 且input的id与label的for相匹配
56
    2. css样式：input:focus
57
     */
58
59
      #slide5:checked ~ .imgList img:nth-of-type(5),
60
      #slide4:checked ~ .imgList img:nth-of-type(4),
61
      #slide3:checked ~ .imgList img:nth-of-type(3),
62
      #slide2:checked ~ .imgList img:nth-of-type(2),
63
      #slide1:checked ~ .imgList img:nth-of-type(1) {
64
        z-index: 1;
65
        opacity: 1;
66
      }
67
68
      /* 
69
    第五张图片时 
70
      左按钮应该去4 右按钮去1 
71
    第四张图片时
72
      左按钮应该去3 右按钮去5
73
    第三张图片时
74
      左按钮应该去2 右按钮去4
75
    第二张图片时
76
      左按钮应该去1 右按钮去3
77
    第一张图片时
78
      左按钮应该去5 右按钮去2
79
    */
80
      #slide5:checked ~ label:nth-of-type(1),
81
      #slide4:checked ~ label:nth-of-type(5),
82
      #slide3:checked ~ label:nth-of-type(4),
83
      #slide2:checked ~ label:nth-of-type(3),
84
      #slide1:checked ~ label:nth-of-type(2) {
85
        display: block;
86
        right: 0;
87
        background-position: -125px;
88
      }
89
      /* 鼠标悬停改变雪碧图位置 */
90
      #slide5:checked ~ label:nth-of-type(1):hover,
91
      #slide4:checked ~ label:nth-of-type(5):hover,
92
      #slide3:checked ~ label:nth-of-type(4):hover,
93
      #slide2:checked ~ label:nth-of-type(3):hover,
94
      #slide1:checked ~ label:nth-of-type(2):hover {
95
        background-position: -41px;
96
      }
97
      #slide5:checked ~ label:nth-of-type(4),
98
      #slide4:checked ~ label:nth-of-type(3),
99
      #slide3:checked ~ label:nth-of-type(2),
100
      #slide2:checked ~ label:nth-of-type(1),
101
      #slide1:checked ~ label:nth-of-type(5) {
102
        display: block;
103
        left: 0;
104
        background-position: -84px;
105
      }
106
      /* 鼠标悬停改变雪碧图位置 */
107
      #slide5:checked ~ label:nth-of-type(4):hover,
108
      #slide4:checked ~ label:nth-of-type(3):hover,
109
      #slide3:checked ~ label:nth-of-type(2):hover,
110
      #slide2:checked ~ label:nth-of-type(1):hover,
111
      #slide1:checked ~ label:nth-of-type(5):hover {
112
        background-position: 0px;
113
      }
114
      input {
115
        display: none;
116
      }
117
    </style>
118
  </head>
119
120
  <body>
121
    <!-- 视觉容器 -->
122
    <div class="container">
123
      <!-- 左右切换菜单 -->
124
      <input type="radio" name="slide" id="slide1" checked />
125
      <input type="radio" name="slide" id="slide2" />
126
      <input type="radio" name="slide" id="slide3" />
127
      <input type="radio" name="slide" id="slide4" />
128
      <input type="radio" name="slide" id="slide5" />
129
      <label for="slide1" class="slide slide1"></label>
130
      <label for="slide2" class="slide slide2"></label>
131
      <label for="slide3" class="slide slide3"></label>
132
      <label for="slide4" class="slide slide4"></label>
133
      <label for="slide5" class="slide slide5"></label>
134
      <!-- 图片列表 -->
135
      <div class="imgList">
136
        <img
137
          src="https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png"
138
        />
139
        <img
140
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg"
141
        />
142
        <img
143
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg"
144
        />
145
        <img
146
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg"
147
        />
148
        <img
149
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg"
150
        />
151
      </div>
152
      <!-- 轮播图的导航 -->
153
      <div class="nav"></div>
154
    </div>
155
  </body>
156
</html>
157