analysis

轮播图静态布局

一种是比较常规的2d布局。也就是通过定位的方式将三张图片排列开，然后通过层级控制要显示的图片为最高层级。并设置宽高。

演示地址：https://gethtml.cn/project/2020/03/28/static-2d.html


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>Document</title>
8
    <style>
9
        .container {
10
            width: 1130px;
11
            height: 400px;
12
            margin: 100px auto 0;
13
            position: relative;
14
        }
15
16
        .img-list {
17
            width: 960px;
18
            height: 400px;
19
            
20
            margin: 0 auto;
21
            position: relative;
22
23
        }
24
        .img-list  img{
25
            display: block;
26
            width: 493px;
27
            height: 289px;
28
            position: absolute;
29
            top: 50%;
30
            transform: translateY(-50%);
31
        }
32
        .img-list  img:nth-child(1){
33
            left: 0;
34
        }.img-list  img:nth-child(2){
35
            right: 0;
36
        }
37
        .img-list  img:nth-child(3){
38
            left: 50%;
39
            transform: translate(-50%,-50%);
40
        }
41
        img.active{
42
            width: 660px;
43
            height: 375px;
44
            border-left: 10px solid #fafafa;
45
            border-right: 10px solid #fafafa;
46
        }
47
        .change-btn {
48
            width: 100%;
49
            height: 100%;
50
            position: absolute;
51
            left: 0;
52
            right: 0;
53
            top: 0;
54
            bottom: 0;
55
            opacity: .5;
56
57
        }
58
59
        .change-btn .left,
60
        .change-btn .right {
61
            width: 24px;
62
            height: 48px;
63
            cursor: pointer;
64
            background-repeat: no-repeat;
65
            background-size: 24px;
66
            position: absolute;
67
            top: 50%;
68
            transform: translateY(-50%);
69
70
        }
71
72
        .change-btn .left {
73
            background-image: url(https://ae01.alicdn.com/kf/H44c3bc284cbe433ebf6dd85ba5d64285K.png);
74
        }
75
76
        .change-btn .right {
77
            background-image: url(https://ae01.alicdn.com/kf/Ha25bd5de08d04584b43182b22a7ec9bbK.png);
78
            right: 0;
79
        }
80
81
        .nav-line {
82
            width: 108px;
83
            height: 1px;
84
            background-color: #e8e8e8;
85
            position: absolute;
86
            bottom: 0;
87
            right: 85px;
88
        }
89
        .nav-line div{
90
            width: 36px;
91
            height: 1px;
92
            float: left;
93
            cursor: pointer;
94
        }
95
        .nav-line div.active{
96
            background-color: #333;
97
        }
98
    </style>
99
100
</head>
101
102
<body>
103
    <!-- 视觉窗口 -->
104
    <div class="container">
105
        <!-- 图片列表 -->
106
        <div class="img-list">
107
            <img src="https://ae01.alicdn.com/kf/H0b1eb310ce894aa08f9b4807d1bf3ca4x.jpg" />
108
            <img src="https://ae01.alicdn.com/kf/Heaf789203f4147f0b5114a23c618c643K.jpg" />
109
            <img class="active" src="https://ae01.alicdn.com/kf/H50df113bb77145aca87f6762a035d358m.jpg" />
110
        </div>
111
        <!-- 左右切换 -->
112
        <div class="change-btn">
113
            <div class="left"></div>
114
            <div class="right"></div>
115
        </div>
116
        <!-- 导航器 -->
117
        <div class="nav-line">
118
            <div></div>
119
            <div></div>
120
            <div class="active"></div>
121
        </div>
122
    </div>
123
</body>
124
125
</html>

另一种方法就是使用3d的方法实现布局。为父级设置perspective属性后，利用translateZ控制图的大小。

演示地址：https://gethtml.cn/project/2020/03/28/static-3d.html


125
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>Document</title>
8
    <style>
9
        .container {
10
            width: 1130px;
11
            height: 400px;
12
            margin: 100px auto 0;
13
            position: relative;
14
        }
15
16
        .img-list {
17
            width: 960px;
18
            height: 400px;
19
            perspective: 800px;
20
            margin: 0 auto;
21
            position: relative;
22
            
23
24
        }
25
        .img-list  img{
26
            display: block;
27
            width: 493px;
28
            height: 289px;
29
            position: absolute;
30
            top: 50%;
31
            transform: translateY(-50%);
32
        }
33
        .img-list  img:nth-child(1){
34
            left: 0;
35
        }.img-list  img:nth-child(2){
36
            right: 0;
37
        }
38
        .img-list  img:nth-child(3){
39
            left: 50%;
40
            /* transform: translate(-50%,-50%); */
41
        }
42
        img.active{
43
            transform: translate3d(-50%,-50%,160px);
44
            border-left: 10px solid #fafafa;
45
            border-right: 10px solid #fafafa;
46
        }
47
        .change-btn {
48
            width: 100%;
49
            height: 100%;
50
            position: absolute;
51
            left: 0;
52
            right: 0;
53
            top: 0;
54
            bottom: 0;
55
            opacity: .5;
56
57
        }
58
59
        .change-btn .left,
60
        .change-btn .right {
61
            width: 24px;
62
            height: 48px;
63
            cursor: pointer;
64
            background-repeat: no-repeat;
65
            background-size: 24px;
66
            position: absolute;
67
            top: 50%;
68
            transform: translateY(-50%);
69
70
        }
71
72
        .change-btn .left {
73
            background-image: url(https://ae01.alicdn.com/kf/H44c3bc284cbe433ebf6dd85ba5d64285K.png);
74
        }
75
76
        .change-btn .right {
77
            background-image: url(https://ae01.alicdn.com/kf/Ha25bd5de08d04584b43182b22a7ec9bbK.png);
78
            right: 0;
79
        }
80
81
        .nav-line {
82
            width: 108px;
83
            height: 1px;
84
            background-color: #e8e8e8;
85
            position: absolute;
86
            bottom: 0;
87
            right: 85px;
88
        }
89
        .nav-line div{
90
            width: 36px;
91
            height: 1px;
92
            float: left;
93
            cursor: pointer;
94
        }
95
        .nav-line div.active{
96
            background-color: #333;
97
        }
98
    </style>
99
100
</head>
101
102
<body>
103
    <!-- 视觉窗口 -->
104
    <div class="container">
105
        <!-- 图片列表 -->
106
        <div class="img-list">
107
            <img src="https://ae01.alicdn.com/kf/H0b1eb310ce894aa08f9b4807d1bf3ca4x.jpg" />
108
            <img src="https://ae01.alicdn.com/kf/Heaf789203f4147f0b5114a23c618c643K.jpg" />
109
            <img class="active" src="https://ae01.alicdn.com/kf/H50df113bb77145aca87f6762a035d358m.jpg" />
110
        </div>
111
        <!-- 左右切换 -->
112
        <div class="change-btn">
113
            <div class="left"></div>
114
            <div class="right"></div>
115
        </div>
116
        <!-- 导航器 -->
117
        <div class="nav-line">
118
            <div></div>
119
            <div></div>
120
            <div class="active"></div>
121
        </div>
122
    </div>
123
</body>
124
125
</html>

动态轮播图

实现方法同小米轮播图较为类似。

同样的需要利用input+label实现对图片的控制。但与小米轮播图不同时的，这个轮播图不可以用透明度设置，因为三张图片都是显示的。

演示地址：https://gethtml.cn/project/2020/03/28/slide.html


xxxxxxxxxx
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>Document</title>
7
    <style>
8
      .container {
9
        width: 1130px;
10
        height: 400px;
11
        margin: 100px auto 0;
12
        position: relative;
13
      }
14
15
      .container input {
16
        display: none;
17
      }
18
19
      .img-list {
20
        width: 960px;
21
        height: 400px;
22
23
        margin: 0 auto;
24
        position: relative;
25
      }
26
27
      .img-list img {
28
        display: block;
29
        width: 493px;
30
        height: 289px;
31
        position: absolute;
32
        top: 50%;
33
        transform: translateY(-50%);
34
        transition: all 0.6s linear;
35
      }
36
      .change-btn {
37
        width: 100%;
38
        height: 100%;
39
        position: absolute;
40
        left: 0;
41
        right: 0;
42
        top: 0;
43
        bottom: 0;
44
      }
45
46
      .change-btn label {
47
        height: 48px;
48
        cursor: pointer;
49
        background-repeat: no-repeat;
50
        background-size: 24px;
51
        position: absolute;
52
        top: 50%;
53
        transform: translateY(-50%);
54
      }
55
56
      /* 显示在左边的切换按钮 */
57
58
      #slide1:checked ~ .change-btn label:nth-child(2),
59
      #slide2:checked ~ .change-btn label:nth-child(3),
60
      #slide3:checked ~ .change-btn label:nth-child(1) {
61
        background-image: url(https://ae01.alicdn.com/kf/H44c3bc284cbe433ebf6dd85ba5d64285K.png);
62
        width: 24px;
63
      }
64
65
      /* 显示在右边的切换按钮 */
66
      #slide1:checked ~ .change-btn label:nth-child(3),
67
      #slide2:checked ~ .change-btn label:nth-child(1),
68
      #slide3:checked ~ .change-btn label:nth-child(2) {
69
        background-image: url(https://ae01.alicdn.com/kf/Ha25bd5de08d04584b43182b22a7ec9bbK.png);
70
        right: 0;
71
        width: 24px;
72
      }
73
74
      .nav-line {
75
        width: 108px;
76
        height: 1px;
77
        background-color: #e8e8e8;
78
        position: absolute;
79
        bottom: 0;
80
        right: 85px;
81
      }
82
83
      .nav-line label {
84
        width: 36px;
85
        height: 1px;
86
        float: left;
87
        cursor: pointer;
88
      }
89
90
      /* 轮播图的导航器 */
91
      #slide1:checked ~ .nav-line label:nth-child(1),
92
      #slide2:checked ~ .nav-line label:nth-child(2),
93
      #slide3:checked ~ .nav-line label:nth-child(3) {
94
        background-color: #333;
95
      }
96
97
      /* 动态交互 */
98
      /* 显示在中间的图片 */
99
      #slide1:checked ~ .img-list img:nth-child(1),
100
      #slide2:checked ~ .img-list img:nth-child(2),
101
      #slide3:checked ~ .img-list img:nth-child(3) {
102
        width: 660px;
103
        height: 375px;
104
        border-left: 10px solid #fafafa;
105
        border-right: 10px solid #fafafa;
106
        left: 50%;
107
        transform: translate(-50%, -50%);
108
        z-index: 1;
109
      }
110
      /* 显示在右边的图片 */
111
      #slide1:checked ~ .img-list img:nth-child(2),
112
      #slide2:checked ~ .img-list img:nth-child(3),
113
      #slide3:checked ~ .img-list img:nth-child(1) {
114
        left: 467px;
115
        z-index: 0;
116
      }
117
      /* 显示左边的图片 */
118
      #slide1:checked ~ .img-list img:nth-child(3),
119
      #slide2:checked ~ .img-list img:nth-child(1),
120
      #slide3:checked ~ .img-list img:nth-child(2) {
121
        left: 0;
122
        z-index: 0;
123
      }
124
    </style>
125
  </head>
126
127
  <body>
128
    <!-- 视觉窗口 -->
129
    <div class="container">
130
      <input type="radio" name="slides" id="slide1" checked />
131
      <input type="radio" name="slides" id="slide2" />
132
      <input type="radio" name="slides" id="slide3" />
133
      <!-- 图片列表 -->
134
      <div class="img-list">
135
        <img
136
          src="https://ae01.alicdn.com/kf/H0b1eb310ce894aa08f9b4807d1bf3ca4x.jpg"
137
        />
138
        <img
139
          src="https://ae01.alicdn.com/kf/Heaf789203f4147f0b5114a23c618c643K.jpg"
140
        />
141
        <img
142
          class="active"
143
          src="https://ae01.alicdn.com/kf/H50df113bb77145aca87f6762a035d358m.jpg"
144
        />
145
      </div>
146
      <!-- 左右切换 -->
147
      <div class="change-btn">
148
        <label for="slide1"></label>
149
        <label for="slide2"></label>
150
        <label for="slide3"></label>
151
      </div>
152
      <!-- 导航器 -->
153
      <div class="nav-line">
154
        <label for="slide1"></label>
155
        <label for="slide2"></label>
156
        <label for="slide3"></label>
157
      </div>
158
    </div>
159
  </body>
160
</html>