analysis

轮播图的导航栏

导航栏基于上一个可以左右滑动的轮播图实现。实现方法很简单。

由于已经实现了可以切换图片的label标签，因此复制一个一模一样的即可。


1
<div class="nav">
2
    <label for="slide1"></label>
3
    <label for="slide2"></label>
4
    <label for="slide3"></label>
5
    <label for="slide4"></label>
6
    <label for="slide5"></label>
7
</div>

接下来需要做的就是继续将每一张图片与刚加入的label标签绑定


xxxxxxxxxx
8
1
#slide1:checked~.nav label:nth-child(1),
2
#slide2:checked~.nav label:nth-child(2),
3
#slide3:checked~.nav label:nth-child(3),
4
#slide4:checked~.nav label:nth-child(4),
5
#slide5:checked~.nav label:nth-child(5) {
6
border-color: rgba(0, 0, 0, .4);
7
background: hsla(0, 0%, 100%, 1);
8
}

这样基本上就可以了，至于显示位置及样式根据自己调整即可。

参考代码


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("https://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
      /* 导航 */
118
      .nav {
119
        width: 400px;
120
        height: 8px;
121
        position: absolute;
122
        left: auto;
123
        right: 30px;
124
        bottom: 20px;
125
        text-align: right;
126
        z-index: 99;
127
      }
128
129
      .nav label {
130
        /* z-index: 99; */
131
        width: 14px;
132
        height: 14px;
133
        border: 2px solid #fff;
134
        border-color: hsla(0, 0%, 100%, 0.3);
135
        border-radius: 50%;
136
        overflow: hidden;
137
        background: rgba(0, 0, 0, 0.4);
138
        opacity: 1;
139
        margin-left: 3px;
140
        display: inline-block;
141
        cursor: pointer;
142
      }
143
144
      .nav label:hover {
145
        border-color: rgba(0, 0, 0, 0.4);
146
        background: hsla(0, 0%, 100%, 1);
147
      }
148
149
      /* 底部导航 */
150
      #slide1:checked ~ .nav label:nth-child(1),
151
      #slide2:checked ~ .nav label:nth-child(2),
152
      #slide3:checked ~ .nav label:nth-child(3),
153
      #slide4:checked ~ .nav label:nth-child(4),
154
      #slide5:checked ~ .nav label:nth-child(5) {
155
        border-color: rgba(0, 0, 0, 0.4);
156
        background: hsla(0, 0%, 100%, 1);
157
      }
158
    </style>
159
  </head>
160
161
  <body>
162
    <!-- 视觉容器 -->
163
    <div class="container">
164
      <!-- 左右切换菜单 -->
165
      <input type="radio" name="slide" id="slide1" checked />
166
      <input type="radio" name="slide" id="slide2" />
167
      <input type="radio" name="slide" id="slide3" />
168
      <input type="radio" name="slide" id="slide4" />
169
      <input type="radio" name="slide" id="slide5" />
170
      <label for="slide1" class="slide slide1"></label>
171
      <label for="slide2" class="slide slide2"></label>
172
      <label for="slide3" class="slide slide3"></label>
173
      <label for="slide4" class="slide slide4"></label>
174
      <label for="slide5" class="slide slide5"></label>
175
      <!-- 图片列表 -->
176
      <div class="imgList">
177
        <img
178
          src="https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png"
179
        />
180
        <img
181
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg"
182
        />
183
        <img
184
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg"
185
        />
186
        <img
187
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg"
188
        />
189
        <img
190
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg"
191
        />
192
      </div>
193
      <!-- 轮播图的导航 -->
194
      <div class="nav">
195
        <label for="slide1"></label>
196
        <label for="slide2"></label>
197
        <label for="slide3"></label>
198
        <label for="slide4"></label>
199
        <label for="slide5"></label>
200
      </div>
201
    </div>
202
  </body>
203
</html>
204

百叶窗效果

在实现了上述轮播图后实现百叶窗效果是需要改造的。

首先是HTML结构，图片列表使用的是img标签，百叶窗实际上是将图片分割成不同的小块然后逐个切换。所以需要将HTML结构改造为一个div（作为每个小块的容器）嵌套若干个（这里用四个举例）div（作为图片展示）


xxxxxxxxxx
32
1
<div class="imgList">
2
    <div class="img">
3
        <div class="frag"></div>
4
        <div class="frag"></div>
5
        <div class="frag"></div>
6
        <div class="frag"></div>
7
    </div>
8
    <div class="img">
9
        <div class="frag"></div>
10
        <div class="frag"></div>
11
        <div class="frag"></div>
12
        <div class="frag"></div>
13
    </div>
14
    <div class="img">
15
        <div class="frag"></div>
16
        <div class="frag"></div>
17
        <div class="frag"></div>
18
        <div class="frag"></div>
19
    </div>
20
    <div class="img">
21
        <div class="frag"></div>
22
        <div class="frag"></div>
23
        <div class="frag"></div>
24
        <div class="frag"></div>
25
    </div>
26
    <div class="img">
27
        <div class="frag"></div>
28
        <div class="frag"></div>
29
        <div class="frag"></div>
30
        <div class="frag"></div>
31
    </div>
32
</div>

上述结构中，img作为每张图片的容器，frag是实际上展示图片的容器。也就是每个frag显示图片的四分之一（随窗口数而定）

对于img与frag两个class的样式需要调整为


xxxxxxxxxx
16
1
.container .imgList .img {
2
    height: 100%;
3
    width: 100%;
4
    height: auto;
5
    position: absolute;
6
    left: 0;
7
    top: 0;
8
}
9
.container .imgList .img .frag {
10
    float: left;
11
    height: 460px;
12
    width: 25%;
13
    background-size: 1226px 460px;
14
    opacity: 0;
15
    z-index: 0;
16
}

frag的宽度为容器的25%也就是四分之一，高度也是容器的高度。由于这个效果是基于每个小块的不同切换效果实现的，那么自然需要将背景图像的大小调整好也就是background-size属性。

设置每块容器(img)里每个小块(frag)显示的图片


xxxxxxxxxx
19
1
.container .imgList .img:nth-child(1) .frag {
2
    background-image: url(https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png);
3
}
4
5
.container .imgList .img:nth-child(2) .frag {
6
    background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg);
7
}
8
9
.container .imgList .img:nth-child(3) .frag {
10
    background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg);
11
}
12
13
.container .imgList .img:nth-child(4) .frag {
14
    background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg);
15
}
16
17
.container .imgList .img:nth-child(5) .frag {
18
    background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg);
19
}

调整四小块中每一块显示的区域。

这一步很简单，如果不修改每一块的位置，那么四张图显示的都是一样的。而我们需要的是四小块拼成一个完整的。并且每一个都是有一个延迟的，所以同样需要为每一个小块设置延迟时间(transition-delay)。


xxxxxxxxxx
19
1
.container .imgList .img .frag:nth-child(2) {
2
    background-position: -306.5px 0;
3
    transition-delay: .2s;
4
}
5
6
.container .imgList .img .frag:nth-child(3) {
7
    background-position: -613px 0;
8
    transition-delay: .3s;
9
}
10
11
.container .imgList .img .frag:nth-child(4) {
12
    background-position: -919.5px 0;
13
    transition-delay: .4s;
14
}
15
16
.container .imgList .img .frag:nth-child(5) {
17
    background-position: -1226px 0;
18
    transition-delay: .5s;
19
}

调整当按钮(label标签)点下去时改变的元素。


xxxxxxxxxx
8
1
#slide1:checked~.imgList .img:nth-child(1) .frag,
2
#slide2:checked~.imgList .img:nth-child(2) .frag,
3
#slide3:checked~.imgList .img:nth-child(3) .frag,
4
#slide4:checked~.imgList .img:nth-child(4) .frag,
5
#slide5:checked~.imgList .img:nth-child(5) .frag {
6
    opacity: 1;
7
    z-index: 1;
8
}

此时页面已经可以有基本效果了。接下来需要做的只是美化。


xxxxxxxxxx
22
1
#slide1:checked~.imgList .img:nth-child(1) .frag,
2
#slide2:checked~.imgList .img:nth-child(2) .frag,
3
#slide3:checked~.imgList .img:nth-child(3) .frag,
4
#slide4:checked~.imgList .img:nth-child(4) .frag,
5
#slide5:checked~.imgList .img:nth-child(5) .frag {
6
    opacity: 1;
7
    z-index: 1;
8
    transform: rotateY(90deg) translateZ(180deg) scale(1.5);
9
    filter: saturate(1) blur(0px) brightness(1) contrast(1);
10
}
11
.container .imgList .img .frag {
12
    float: left;
13
    height: 460px;
14
    width: 25%;
15
    background-size: 1226px 460px;
16
    opacity: 0;
17
    z-index: 0;
18
    transform-origin: center right;
19
    filter: saturate(0) blur(10px) brightness(.6) contrast(4);
20
    transition: transform .6s, opacity .6s, filter .6s ease-out;
21
22
}

示例代码


xxxxxxxxxx
269
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
    <meta charset="UTF-8" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>小米轮播图示例--百叶窗效果</title>
8
    <style>
9
        * {
10
            box-sizing: border-box;
11
        }
12
13
        body {
14
            margin: 0;
15
            padding: 0;
16
        }
17
18
        .container {
19
            width: 1226px;
20
            height: 460px;
21
            background: lightcyan;
22
            margin: 100px auto;
23
            position: relative;
24
        }
25
26
        .container .imgList {
27
            width: 100%;
28
            position: relative;
29
        }
30
31
        .container .imgList .img {
32
            height: 100%;
33
            width: 100%;
34
            height: auto;
35
            position: absolute;
36
            left: 0;
37
            top: 0;
38
        }
39
40
        .container .imgList .img .frag {
41
            float: left;
42
            height: 460px;
43
            width: 25%;
44
            background-size: 1226px 460px;
45
            opacity: 0;
46
            z-index: 0;
47
            transform-origin: center right;
48
            filter: saturate(0) blur(10px) brightness(.6) contrast(4);
49
            transition: transform .6s, opacity .6s, filter .6s ease-out;
50
        }
51
52
        .container .imgList .img:nth-child(1) .frag {
53
            background-image: url(https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png);
54
        }
55
56
        .container .imgList .img:nth-child(2) .frag {
57
            background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg);
58
        }
59
60
        .container .imgList .img:nth-child(3) .frag {
61
            background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg);
62
        }
63
64
        .container .imgList .img:nth-child(4) .frag {
65
            background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg);
66
        }
67
68
        .container .imgList .img:nth-child(5) .frag {
69
            background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg);
70
        }
71
72
        .container .imgList .img .frag:nth-child(2) {
73
            background-position: -306.5px 0;
74
            transition-delay: .2s;
75
        }
76
77
        .container .imgList .img .frag:nth-child(3) {
78
            background-position: -613px 0;
79
            transition-delay: .3s;
80
        }
81
82
        .container .imgList .img .frag:nth-child(4) {
83
            background-position: -919.5px 0;
84
            transition-delay: .4s;
85
        }
86
87
        .container .imgList .img .frag:nth-child(5) {
88
            background-position: -1226px 0;
89
            transition-delay: .5s;
90
        }
91
92
        #slide1:checked~.imgList .img:nth-child(1) .frag,
93
        #slide2:checked~.imgList .img:nth-child(2) .frag,
94
        #slide3:checked~.imgList .img:nth-child(3) .frag,
95
        #slide4:checked~.imgList .img:nth-child(4) .frag,
96
        #slide5:checked~.imgList .img:nth-child(5) .frag {
97
            opacity: 1;
98
            z-index: 1;
99
            transform: rotateY(90deg) translateZ(180deg) scale(1.5);
100
            filter: saturate(1) blur(0px) brightness(1) contrast(1);
101
        }
102
103
        .slide {
104
            width: 41px;
105
            height: 69px;
106
            background-image: url("https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png");
107
            background-repeat: no-repeat;
108
            position: absolute;
109
            top: 50%;
110
            transform: translateY(-50%);
111
            z-index: 99;
112
            display: none;
113
            cursor: pointer;
114
        }
115
116
        #slide5:checked~.imgList img:nth-of-type(5),
117
        #slide4:checked~.imgList img:nth-of-type(4),
118
        #slide3:checked~.imgList img:nth-of-type(3),
119
        #slide2:checked~.imgList img:nth-of-type(2),
120
        #slide1:checked~.imgList img:nth-of-type(1) {
121
            z-index: 1;
122
            opacity: 1;
123
        }
124
125
        #slide5:checked~label:nth-of-type(1),
126
        #slide4:checked~label:nth-of-type(5),
127
        #slide3:checked~label:nth-of-type(4),
128
        #slide2:checked~label:nth-of-type(3),
129
        #slide1:checked~label:nth-of-type(2) {
130
            display: block;
131
            right: 0;
132
            background-position: -125px;
133
        }
134
135
        /* 鼠标悬停改变雪碧图位置 */
136
        #slide5:checked~label:nth-of-type(1):hover,
137
        #slide4:checked~label:nth-of-type(5):hover,
138
        #slide3:checked~label:nth-of-type(4):hover,
139
        #slide2:checked~label:nth-of-type(3):hover,
140
        #slide1:checked~label:nth-of-type(2):hover {
141
            background-position: -41px;
142
        }
143
144
        #slide5:checked~label:nth-of-type(4),
145
        #slide4:checked~label:nth-of-type(3),
146
        #slide3:checked~label:nth-of-type(2),
147
        #slide2:checked~label:nth-of-type(1),
148
        #slide1:checked~label:nth-of-type(5) {
149
            display: block;
150
            left: 0;
151
            background-position: -84px;
152
        }
153
154
        /* 鼠标悬停改变雪碧图位置 */
155
        #slide5:checked~label:nth-of-type(4):hover,
156
        #slide4:checked~label:nth-of-type(3):hover,
157
        #slide3:checked~label:nth-of-type(2):hover,
158
        #slide2:checked~label:nth-of-type(1):hover,
159
        #slide1:checked~label:nth-of-type(5):hover {
160
            background-position: 0px;
161
        }
162
163
        input {
164
            display: none;
165
        }
166
167
        /* 导航 */
168
        .nav {
169
            width: 400px;
170
            height: 8px;
171
            position: absolute;
172
            left: auto;
173
            right: 30px;
174
            bottom: 20px;
175
            text-align: right;
176
            z-index: 99;
177
        }
178
179
        .nav label {
180
            /* z-index: 99; */
181
            width: 14px;
182
            height: 14px;
183
            border: 2px solid #fff;
184
            border-color: hsla(0, 0%, 100%, 0.3);
185
            border-radius: 50%;
186
            overflow: hidden;
187
            background: rgba(0, 0, 0, 0.4);
188
            opacity: 1;
189
            margin-left: 3px;
190
            display: inline-block;
191
            cursor: pointer;
192
        }
193
194
        .nav label:hover {
195
            border-color: rgba(0, 0, 0, 0.4);
196
            background: hsla(0, 0%, 100%, 1);
197
        }
198
199
        /* 底部导航 */
200
        #slide1:checked~.nav label:nth-child(1),
201
        #slide2:checked~.nav label:nth-child(2),
202
        #slide3:checked~.nav label:nth-child(3),
203
        #slide4:checked~.nav label:nth-child(4),
204
        #slide5:checked~.nav label:nth-child(5) {
205
            border-color: rgba(0, 0, 0, 0.4);
206
            background: hsla(0, 0%, 100%, 1);
207
        }
208
    </style>
209
</head>
210
211
<body>
212
    <!-- 视觉容器 -->
213
    <div class="container">
214
        <!-- 左右切换菜单 -->
215
        <input type="radio" name="slide" id="slide1" checked />
216
        <input type="radio" name="slide" id="slide2" />
217
        <input type="radio" name="slide" id="slide3" />
218
        <input type="radio" name="slide" id="slide4" />
219
        <input type="radio" name="slide" id="slide5" />
220
        <label for="slide1" class="slide slide1"></label>
221
        <label for="slide2" class="slide slide2"></label>
222
        <label for="slide3" class="slide slide3"></label>
223
        <label for="slide4" class="slide slide4"></label>
224
        <label for="slide5" class="slide slide5"></label>
225
        <!-- 图片列表 -->
226
        <div class="imgList">
227
            <div class="img">
228
                <div class="frag"></div>
229
                <div class="frag"></div>
230
                <div class="frag"></div>
231
                <div class="frag"></div>
232
            </div>
233
            <div class="img">
234
                <div class="frag"></div>
235
                <div class="frag"></div>
236
                <div class="frag"></div>
237
                <div class="frag"></div>
238
            </div>
239
            <div class="img">
240
                <div class="frag"></div>
241
                <div class="frag"></div>
242
                <div class="frag"></div>
243
                <div class="frag"></div>
244
            </div>
245
            <div class="img">
246
                <div class="frag"></div>
247
                <div class="frag"></div>
248
                <div class="frag"></div>
249
                <div class="frag"></div>
250
            </div>
251
            <div class="img">
252
                <div class="frag"></div>
253
                <div class="frag"></div>
254
                <div class="frag"></div>
255
                <div class="frag"></div>
256
            </div>
257
        </div>
258
        <!-- 轮播图的导航 -->
259
        <div class="nav">
260
            <label for="slide1"></label>
261
            <label for="slide2"></label>
262
            <label for="slide3"></label>
263
            <label for="slide4"></label>
264
            <label for="slide5"></label>
265
        </div>
266
    </div>
267
</body>
268
269
</html>