Post

레이아웃 이미지 슬라이드 3 - javascript

Posted
Preview Image
By kimyih 12 min read

레이아웃 슬라이드 이미지 만들기

slider3-1

완성화면

가운데에 있는 총 3개의 이미지가 아래에서 위로 올라가는 이미지 슬라이드 입니다.

jquery와 javascript 를 사용하여 이 애니메이션을 할 수 있습니다. javascrip / jquery 를 따로따로 작성하여 한 줄씩 분석해보겠습니다!



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

        window.onload = function () {
            let currentIndex = 0; // 현재 이미지 설정
            const sliderWrap = document.querySelector(".sliderWrap");   // 전체 이미지
            const slider = document.querySelectorAll(".slider");    // 각각의 이미지
            const sliderClone = sliderWrap.firstElementChild.cloneNode(true);  // 첫번째 이미지를 저장
            sliderWrap.appendChild(sliderClone);

            setInterval(() => {
                currentIndex++;
                sliderWrap.style.transition = "all 0.6s";
                sliderWrap.style.marginTop = -currentIndex * 300 + "px";

                if (currentIndex == 3) {
                    setTimeout(() => {
                        sliderWrap.style.transition = "0s";
                        sliderWrap.style.marginTop = "0";
                        currentIndex = 0;
                    }, 700);
                }
            }, 3000);
        }


간단한 이미지 슬라이더의 기능을 수행하는 javascript 코드입니다.


바로 코드를 분석해보겠습니다.


1

window.onload = function () {
  • window.onload = function() {…}: 웹 페이지의 모든 리소스가 로드된 후에 이 함수가 실행됩니다.
    이는 스크립트가 실행되기 전에 모든 HTML 요소가 로드되어 있어야 하므로, 스크립트가 DOM 요소를 안전하게 조작할 수 있도록 합니다.


1

    let currentIndex = 0; // 현재 이미지 설정
  • let currentIndex = 0;: 현재 표시되고 있는 이미지의 인덱스를 0으로 설정합니다. 이는 첫 번째 이미지부터 슬라이드를 시작한다는 것을 의미합니다.


1

    const sliderWrap = document.querySelector(".sliderWrap");   // 전체 이미지 컨테이너
  • const sliderWrap = document.querySelector(“.sliderWrap”);: 클래스 이름이 “sliderWrap”인 요소를 선택합니다.
    이 요소는 이미지들을 감싸는 컨테이너 역할을 합니다.


1

    const slider = document.querySelectorAll(".slider");    // 각각의 이미지
  • const slider = document.querySelectorAll(“.slider”);: 모든 “slider” 클래스를 가진 요소들을 선택합니다.
    이 요소들은 개별 이미지들입니다.


1

    const sliderClone = sliderWrap.firstElementChild.cloneNode(true);  // 첫번째 이미지를 저장
  • const sliderClone = sliderWrap.firstElementChild.cloneNode(true);: sliderWrap의 첫 번째 자식 요소를 깊은 복사하여 저장합니다.
    true 매개변수는 이벤트와 자식 노드를 모두 복제합니다.


1

    sliderWrap.appendChild(sliderClone); // 복사한 이미지를 마지막에 추가
  • sliderWrap.appendChild(sliderClone);: 복제된 첫 번째 이미지를 sliderWrap의 마지막에 추가합니다. 이렇게 하면 슬라이더의 끝에서 원활하게 다시 시작할 수 있습니다.


1

    setInterval(() => {
  • setInterval(() => {…}, 3000);: 주어진 함수를 3000밀리초(3초)마다 반복해서 실행합니다.
    이 기능은 이미지가 주기적으로 자동으로 전환되도록 합니다.


1

        currentIndex++;
  • currentIndex++;: 현재 이미지 인덱스를 1씩 증가시켜 다음 이미지로 이동합니다.


1

        sliderWrap.style.transition = "all 0.6s";
  • sliderWrap.style.transition = “all 0.6s”;: 모든 스타일 변화에 대해 0.6초 동안의 전환 효과를 설정합니다.
    이는 이미지가 이동할 때 부드러운 애니메이션 효과를 제공합니다.


1

        sliderWrap.style.marginTop = -currentIndex * 300 + "px";
  • sliderWrap.style.marginTop = -currentIndex * 300 + “px”;: marginTop 스타일 속성을 사용하여 이미지를 수직으로 이동시킵니다.
    이 계산은 각 이미지가 300px 높이라고 가정하고, 현재 인덱스에 따라 적절한 위치로 슬라이더를 이동시킵니다.


1

        if (currentIndex == 3) {
  • if (currentIndex == 3) {…}: currentIndex가 3에 도달했을 때의 조건을 확인합니다.
    이는 마지막 이미지에 도달했을 때를 의미하며, 여기서는 이미지가 총 4개라고 가정한 상황입니다.


1

setInterval(() => {
  • setInterval 함수는 주어진 함수를 반복적으로 실행합니다. 여기서는 화살표 함수(() =>)를 사용했으며, 이 함수는 3000밀리초(3초) 간격으로 실행됩니다.


1

    currentIndex++;
  • currentIndex는 현재 슬라이더의 위치를 나타내는 변수입니다.
    이 줄은 currentIndex의 값을 1씩 증가시켜, 다음 이미지로 넘어갈 수 있도록 합니다.


1

    sliderWrap.style.transition = "all 0.6s";
  • sliderWrap이라는 HTML 요소의 스타일을 변경합니다.
    transition 속성을 사용해 모든 CSS 변화(all)가 0.6초 동안 부드럽게 적용되도록 설정합니다.


1

    sliderWrap.style.marginTop = -currentIndex * 300 + "px";
  • sliderWrap의 marginTop 스타일을 설정합니다.
    이는 현재 인덱스에 해당하는 이미지가 보이도록 슬라이더를 위로 올리는 역할을 합니다.
  • dcurrentIndex * 300 부분은 각 이미지가 300픽셀 높이라고 가정했을 때, 해당 이미지 위치로 슬라이더를 이동시키는 계산입니다.


1

    if (currentIndex == 3) {
  • 이 if 조건문은 currentIndex가 3일 때 참이 됩니다. 일반적으로 이는 마지막 이미지를 나타내며, 여기서는 이미지 슬라이더의 끝에 도달했음을 확인합니다.


1

        setTimeout(() => {
  • setTimeout 함수는 지정된 시간 후에 한 번 함수를 실행합니다.
    여기서는 700밀리초(0.7초) 후에 설정된 함수를 실행합니다.


1

            sliderWrap.style.transition = "0s";
  • sliderWrap의 transition 스타일을 “0s”로 설정하여, CSS 변화가 즉각적으로 적용되도록 합니다. 이는 슬라이더가 처음 위치로 돌아갈 때 아무런 지연 없이 빠르게 이동하게 하기 위함입니다.


1

            sliderWrap.style.marginTop = "0";
  • sliderWrap의 marginTop을 “0”으로 설정합니다. 이는 슬라이더를 다시 처음 위치로 되돌리는 역할을 하며, 첫 번째 이미지가 다시 보이도록 합니다.


1

            currentIndex = 0;
  • currentIndex를 0으로 재설정합니다. 이는 슬라이더의 위치를 다시 시작점으로 초기화하여, 이미지 슬라이드가 다시 첫 번째 이미지부터 시작하도록 합니다.


1

        }, 700);
  • setTimeout 함수의 닫는 괄호입니다. 이는 700밀리초 후에 내부 함수가 실행됨을 끝맺음을 나타냅니다.
1
2

    }
}, 3000);
  • setInterval 함수의 닫는 괄호와 간격을 설정하는 부분입니다. 이 코드 블록은 3000밀리초 간격으로 반복적으로 실행됩니다.

전체 코드

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slider-3</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrap {
            width: 1200px;
            height: 700px;
            /* 블록구조 가운데 정렬 */
            margin: 0 auto;
        }

        #header {
            width: 1200px;
            display: flex;
        }

        #header .logo {
            width: 20%;
            height: 100px;
            background-color: #e4ffe0;
        }

        #header .nav {
            width: 80%;
            height: 100px;
            background-color: #bcd7ab;
        }

        #slider {
            width: 1200px;
            height: 300px;
            background-color: #e6fabf;
        }

        #contents {
            width: 1200px;
            display: flex;
        }

        #contents .content1 {
            width: 33.3333%;
            height: 200px;
            background-color: #accbad;
        }

        #contents .content2 {
            width: 33.3333%;
            height: 200px;
            background-color: #cdefd3;
        }

        #contents .content3 {
            width: 33.3333%;
            height: 200px;
            background-color: #c6dcb5;
        }

        #footer {
            width: 1200px;
            display: flex;
        }

        #footer .footer1 {
            width: 20%;
            height: 100px;
            background-color: #c7e9dc;
        }

        #footer .footer2 {
            width: 50%;
            height: 100px;
            background-color: #9bd1cb;
        }

        #footer .footer3 {
            width: 30%;
            height: 100px;
            background-color: #87d8cf;
        }

        /* nav */

        #slider {
            overflow: hidden;
        }

        .sliderWrap .slider {
            position: relative;
        }

        .sliderWrap .slider img {
            vertical-align: top;
        }

        .sliderWrap .slider span {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.4);
            padding: 10px 20px;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div id="header">
            <div class="logo"></div>
            <div class="nav"></div>
        </div>
        <!-- //header -->

        <div id="slider">
            <div class="sliderWrap">
                <div class="slider s1">
                    <img src="../webd/img/slide01.jpg" alt="이미지1">
                    <span>이미지1</span>
                </div>
                <div class="slider s2">
                    <img src="../webd/img/slide02.jpg" alt="이미지1">
                    <span>이미지2</span>
                </div>
                <div class="slider s3">
                    <img src="../webd/img/slide03.jpg" alt="이미지1">
                    <span>이미지3</span>
                </div>
            </div>
        </div>
        <!-- //slider -->

        <div id="contents">
            <div class="content1"></div>
            <div class="content2"></div>
            <div class="content3"></div>
        </div>
        <!-- contents -->

        <div id="footer">
            <div class="footer1"></div>
            <div class="footer2"></div>
            <div class="footer3"></div>
        </div>
        <!-- //footer -->
    </div>
    <!-- //main -->

    <script>
        window.onload = function () {
            let currentIndex = 0; // 현재 이미지 설정
            const sliderWrap = document.querySelector(".sliderWrap");   // 전체 이미지
            const slider = document.querySelectorAll(".slider");    // 각각의 이미지
            const sliderClone = sliderWrap.firstElementChild.cloneNode(true);  // 첫번째 이미지를 저장
            sliderWrap.appendChild(sliderClone);

            setInterval(() => {
                currentIndex++;
                sliderWrap.style.transition = "all 0.6s";
                sliderWrap.style.marginTop = -currentIndex * 300 + "px";

                if (currentIndex == 3) {
                    setTimeout(() => {
                        sliderWrap.style.transition = "0s";
                        sliderWrap.style.marginTop = "0";
                        currentIndex = 0;
                    }, 700);
                }
            }, 3000);
        }
    </script>

</body>

</html>


이렇게 이미지를 하나 복사해서 오른쪽에서 왼쪽으로 슬라이딩 하는 형식의 javascript 였습니다!

layout
note
This post is licensed under CC BY 4.0 by the author.