分屏滑动图片展示页 Vertical Slider
1. 概述
项目本体展示了一个分屏滑动图片展示页.
效果:
2. 结构和切图
网页的基本结构如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<body>
<div class="slider-container">
<div class="left-slide">
<div style="background-color: rgba(112, 112, 112);">
<h1>Monochrome Avatar</h1>
<p>Used 1 year ago</p>
</div>
<div style="background-color: rgb(26, 202, 158);">
<h1>Cyan Avatar</h1>
<p>Recently used</p>
</div>
<div style="background-color: rgba(112, 112, 112);">
<h1>Glitched Monochrome Avatar</h1>
<p>Used several months ago</p>
</div>
<div style="background-color: rgb(202, 200, 81);">
<h1>Glithed Colored Avatar</h1>
<p>Currently using</p>
</div>
</div>
<div class="right-slide">
<div style="background-image: url('../expanding-cards/avatar2.jpg');"></div>
<div style="background-image: url('../expanding-cards/avatar0.jpg');"></div>
<div style="background-image: url('../expanding-cards/avatar3.jpg');"></div>
<div style="background-image: url('../expanding-cards/avatar1.jpg');"></div>
</div>
<div class="action-buttons">
<button class="down-button">
<i class="fas fa-arrow-down"></i>
</button>
<button class="up-button">
<i class="fas fa-arrow-up"></i>
</button>
</div>
</div>
</body>
3. 编写 CSS 样式
首先处理 body 排版方式:
1
2
3
4
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
height: 100vh;
}
然后分别处理左侧文字描述部分和右侧图片展示部分的样式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.slider-container {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.left-slide {
height: 100%;
width: 35%;
position: absolute;
top: 0;
left: 0;
transition: transform .5s ease-in-out;
}
.left-slide > div {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
}
.left-slide h1 {
font-size: 40px;
margin-bottom: 10px;
margin-top: -30px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.right-slide {
height: 100%;
position: absolute;
top: 0%;
left: 35%;
width: 65%;
transition: transform .5s ease-in-out;
}
.right-slide > div {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
}
随后设定切换页面的按钮样式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
button {
background-color: #fff;
border: none;
color: #aaa;
cursor: pointer;
font-size: 16px;
padding: 15px;
}
button:hover {
color: #222;
}
button:focus {
outline: none;
}
.slider-container .action-buttons button {
position: absolute;
left: 35%;
top: 50%;
z-index: 100;
}
.slider-container .action-buttons .down-button {
transform: translateX(-100%);
border-top-left-radius: 5pX;
border-bottom-left-radius: 5pX;
}
.slider-container .action-buttons .up-button {
transform: translateY(-100%);
border-top-right-radius: 5pX;
border-bottom-right-radius: 5pX;
}
完整的 CSS 样式表如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
height: 100vh;
}
.slider-container {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.left-slide {
height: 100%;
width: 35%;
position: absolute;
top: 0;
left: 0;
transition: transform .5s ease-in-out;
}
.left-slide > div {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
}
.left-slide h1 {
font-size: 40px;
margin-bottom: 10px;
margin-top: -30px;
}
.right-slide {
height: 100%;
position: absolute;
top: 0%;
left: 35%;
width: 65%;
transition: transform .5s ease-in-out;
}
.right-slide > div {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
}
button {
background-color: #fff;
border: none;
color: #aaa;
cursor: pointer;
font-size: 16px;
padding: 15px;
}
button:hover {
color: #222;
}
button:focus {
outline: none;
}
.slider-container .action-buttons button {
position: absolute;
left: 35%;
top: 50%;
z-index: 100;
}
.slider-container .action-buttons .down-button {
transform: translateX(-100%);
border-top-left-radius: 5pX;
border-bottom-left-radius: 5pX;
}
.slider-container .action-buttons .up-button {
transform: translateY(-100%);
border-top-right-radius: 5pX;
border-bottom-right-radius: 5pX;
}
4. JavaScript
最后, 我们编写 JavaScript 函数:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const sliderContainer = document.querySelector('.slider-container');
const slideRight = document.querySelector('.right-slide');
const slideLeft = document.querySelector('.left-slide');
const upButton = document.querySelector('.up-button');
const downButton = document.querySelector('.down-button');
const slidesLength = slideRight.querySelectorAll('div').length;
let activeSlideIndex = 0;
slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`;
upButton.addEventListener('click', () => changeSlide('up'));
downButton.addEventListener('click', () => changeSlide('down'));
const changeSlide = (dir) => {
const sliderHeight = sliderContainer.clientHeight;
if (dir === 'up') {
activeSlideIndex++;
if (activeSlideIndex > slidesLength - 1) {
activeSlideIndex = 0;
}
} else if (dir === 'down') {
activeSlideIndex--;
if (activeSlideIndex < 0) {
activeSlideIndex = slidesLength - 1;
}
}
slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)`;
slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)`;
}
最后, 完整的网页演示可见 此处
