循环式图片展示组件 Image Carousel
1. 概述
项目本体展示了一个循环式图片展示组件, 图片会自动切换, 也可随着用户对按钮的点击而手动切换.
效果:
2. 结构和切图
网页的基本结构如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<div class="carousel">
<div class="image-container" id="imgs">
<img src= "../expanding-cards/avatar0.JPG" alt="first-image"/>
<img src= "../expanding-cards/avatar1.JPG" alt="second-image"/>
<img src= "../expanding-cards/avatar2.JPG" alt="third-image"/>
<img src= "../expanding-cards/avatar3.JPG" alt="fourth-image"/>
</div>
<div class="buttons-container">
<button id="left" class="btn">Prev</button>
<button id="right" class="btn">Next</button>
</div>
</div>
</body>
3. 编写 CSS 样式
首先定义 body 的排版样式和图片的显示样式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
font-family: 'Roboto', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
img {
width: 550px;
height: 500px;
object-fit: cover;
}
然后分别定义总容器, 图片容器和按钮容器的样式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.carousel {
box-shadow: 2px 2px 5px rgba(0,0,0,.3);
height: 545px;
width: 550px;
overflow: hidden;
border-radius: 3px;
}
.image-container {
display: flex;
transform: translateX(0);
transition: transform .5s ease-in-out;
}
.buttons-container {
display: flex;
justify-content: space-between;
margin: 5px;
}
最后对按钮的样式进行定义:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.btn {
background-color: #1f1e33;
color: #fff;
border: none;
padding: .5rem;
cursor: pointer;
width: 49.5%;
border-radius: 3px;
font-size: 0.8rem;
}
.btn hover {
opacity: .9;
}
.btn:focus {
outline: none;
}
完整的 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
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
img {
width: 550px;
height: 500px;
object-fit: cover;
}
.carousel {
box-shadow: 2px 2px 5px rgba(0,0,0,.3);
height: 545px;
width: 550px;
overflow: hidden;
border-radius: 3px;
}
.image-container {
display: flex;
transform: translateX(0);
transition: transform .5s ease-in-out;
}
.buttons-container {
display: flex;
justify-content: space-between;
margin: 5px;
}
.btn {
background-color: #1f1e33;
color: #fff;
border: none;
padding: .5rem;
cursor: pointer;
width: 49.5%;
border-radius: 3px;
font-size: 0.8rem;
}
.btn hover {
opacity: .9;
}
.btn:focus {
outline: none;
}
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
32
33
34
35
36
37
const imgs = document.getElementById('imgs');
const leftBtn = document.getElementById('left');
const rightBtn = document.getElementById('right');
const img = document.querySelectorAll('#imgs img');
let idx = 0;
let interval = setInterval(run, 2000);
function run() {
idx++;
changeImage();
}
function changeImage() {
if (idx>img.length-1) {
idx=0;
} else if (idx<0) {
idx = img.length-1;
}
imgs.style.transform = `translateX(${-idx * 550}px)`;
}
function resetInterval() {
clearInterval(interval);
interval = setInterval(run, 2000);
}
rightBtn.addEventListener('click', () => {
idx++;
changeImage();
resetInterval();
})
leftBtn.addEventListener('click', () => {
idx--;
changeImage();
resetInterval();
})
最后, 完整的网页演示可见 此处
