2024-06-08 carousel實做輪播，第一步

發表於 更新於 分類於 閱讀次數：
2024-06-08 carousel實做輪播，第一步

2024-06-08 carousel實做輪播，第一步

先架構 html

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列三：練習7 ── carousel 輪播元件</title>
    <link rel="stylesheet" href="./js_carousel.css">
</head>
<body>
<!-- image 
https://images.unsplash.com/photo-1606800052052-a08af7148866?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

https://images.unsplash.com/photo-1511795409834-ef04bbd61622?q=80&w=1469&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

https://images.unsplash.com/photo-1492175742197-ed20dc5a6bed?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

https://images.unsplash.com/photo-1600038938045-b5fadbc55083?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

https://images.unsplash.com/photo-1567620820240-238399e9e438?q=80&w=988&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

-->
<section class="main-carousel">
    <div class="carousel-inner">
        <div class="slide">
            <img src="https://images.unsplash.com/photo-1606800052052-a08af7148866?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image 1">
        </div>
        <div class="slide">
            <img src="https://images.unsplash.com/photo-1511795409834-ef04bbd61622?q=80&w=1469&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image 2">
        </div>
        <div class="slide">
            <img src="https://images.unsplash.com/photo-1492175742197-ed20dc5a6bed?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image 3">
        </div>
        <div class="slide">
            <img src="https://images.unsplash.com/photo-1600038938045-b5fadbc55083?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image 4">
        </div>
        <div class="slide">
            <img src="https://images.unsplash.com/photo-1567620820240-238399e9e438?q=80&w=988&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image 5">
        </div>
    </div>
    <button class="left-slide-btn" >123</button>
    <button class="right-slide-btn">456</button>
    <div class="slide-dots">.....</div>
</section>


    <script src="./js_carousel.js"></script>
</body>
</html>

佈置畫面圖片的部份

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
*{
    margin: 0;
    padding: 0;
    
}
/* 整個carousel區塊 */
.main-carousel{
    position: relative;
    width:100%;
    height: 600px;
    /* overflow: hidden; */
}
/* 圖片顯示區域 */
.main-carousel .carousel-inner{
    width: 100%;
    height: 100%;
}

/* 所有圖片的 div，設定為絕對位置讓圖片層疊 */
.main-carousel .carousel-inner .slide{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    transition: left .5s;
}

/* 圖片本身 */
.main-carousel .carousel-inner .slide > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

實作畫面中圖片的部份

1
2
3
4
5
6
7
8
9
10
11
12
13

//抓取圖片顯示區的區域
const carsouselInner  = document.querySelector('.carousel-inner');
const slides = carsouselInner.children;

//先將圖片展開於carsoousel_inner , 因為width設為100% ，左向右延伸依續為: 0, 100%,200%,300%,400% ...
for (i = 0; i < slides.length ; i++)
{
    slides[i].style.left=i*100 +`%`;
    console.log(slides[i].style.left);
}


步驟一畫面呈現的樣子