Post

layout - javascript

Posted
Preview Image
By nicejmp1 10 min read

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

slider2-1

완성화면

가운데에 있는 총 3개의 이미지가 오른쪽에서 왼쪽으로 슬라이딩 하는 형태의 이미지 슬라이드 입니다

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



이미지 슬라이드를 만들기 위해 구조를 간단하게 설명해드릴게요!


slider2-2

slider2-3

위 사진과 아래 사진을 같은 색으로 구분해놨습니다!


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

        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++;     // 현재 이미지를 1씩 증가시켜줌
                sliderWrap.style.marginLeft = -currentIndex * 100 + "%";
                sliderWrap.style.transition = "all 0.6s";

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


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


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


전체 스크립트 구조

1
2
3

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


변수 초기화 및 DOM 요소 선택

1

let currentIndex = 0; // 현재 이미지
  • let currentIndex = 0;: 현재 보여지는 이미지의 인덱스를 추적하는 변수입니다. 처음에는 첫 번째 이미지(인덱스 0)부터 시작합니다.


1

const sliderWrap = document.querySelector(".sliderWrap");   // 전체 이미지

  • const sliderWrap = document.querySelector(".sliderWrap");: .sliderWrap 클래스를 가진 요소를 찾아서 sliderWrap 변수에 저장합니다. 이 요소는 모든 슬라이더 이미지를 감싸고 있는 컨테이너입니다.

  • const slider = document.querySelectorAll(“.slider”);: .slider 클래스를 가진 모든 요소(이미지들)를 선택하고, 이들의 목록을 slider 변수에 저장합니다.


1

sliderWrap.appendChild(sliderClone);     // 복사한 이미지를 마지막에 추가한 것
  • const sliderClone = sliderWrap.firstElementChild.cloneNode(true);: sliderWrap의 첫 번째 자식 요소(첫 번째 이미지)를 깊은 복사하여 sliderClone에 저장합니다.
    true 매개변수는 요소의 모든 자식을 포함하여 복사합니다.


1

sliderWrap.appendChild(sliderClone);
  • sliderWrap.appendChild(sliderClone);: 복제된 첫 번째 이미지를 sliderWrap의 마지막에 추가합니다.
    이는 슬라이더가 끝에 도달했을 때 무한 스크롤 효과를 위해 첫 번째 이미지로 부드럽게 넘어갈 수 있게 합니다.


d이미지 슬라이드 애니메이션 설정

1
2
3
4

setInterval(() => {
    currentIndex++;     // 현재 이미지를 1씩 증가시켜줌
    sliderWrap.style.marginLeft = -currentIndex * 100 + "%";
    sliderWrap.style.transition = "all 0.6s";

  • setInterval(() => {…}, 3000);: 3000밀리초(3초)마다 함수를 반복 실행합니다. 이 타이머는 이미지를 주기적으로 전환하게 합니다.

  • currentIndex++;: currentIndex 변수를 1씩 증가시킵니다. 이는 다음 이미지로 전환하기 위한 인덱스 증가입니다.

  • sliderWrap.style.marginLeft = -currentIndex * 100 + “%”;: sliderWrap의 marginLeft 스타일 속성을 설정합니다. 이미지 하나의 너비를 100%로 가정할 때, currentIndex에 의해 계산된 값을 사용하여 슬라이더를 왼쪽으로 이동시킵니다. d
  • dsliderWrap.style.transition = “all 0.6s”;: 슬라이드 전환에 애니메이션 효과를 적용합니다.
    모든 속성(all)에 대해 0.6초 동안 부드럽게 변화하도록 설정합니다.


슬라이더 위치 리셋

1
2

if (currentIndex == 3) {
}
  • if (currentIndex == 3) {…}: currentIndex가 3에 도달하면 (즉, 마지막 이미지에 도달하면) 특정 조치를 취합니다. 여기서 3은 마지막 이미지의 인덱스를 가정한 값입니다.


1
2
3
4

    setTimeout(() => {
        sliderWrap.style.transition = "0s"
        sliderWrap.style.marginLeft = "0"
    }, 700);

  • setTimeout(() => {…}, 700);: 700밀리초 후에 함수를 실행합니다. 이 지연은 슬라이더가 마지막 위치에서 첫 위치로 부드럽게 전환되는 시간을 제공합니다.

  • sliderWrap.style.transition = “0s”;: 애니메이션 효과를 즉시 중지합니다. 이는 슬라이더가 빠르게 원점으로 돌아갈 때 사용자에게 보이지 않게 하기 위함입니다.
  • sliderWrap.style.marginLeft = “0”;: sliderWrap의 marginLeft을 0으로 설정하여 슬라이더를 원래 위치로 리셋합니다


전체 코드

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
184

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slider-2</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;
        }

        #slider {
            overflow: hidden;
        }

        .sliderWrap {
            display: flex;
        }

        .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.3);
            color: #fff;
        }
    </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>

    <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++;     // 현재 이미지를 1씩 증가시켜줌
                sliderWrap.style.marginLeft = -currentIndex * 100 + "%";
                sliderWrap.style.transition = "all 0.6s";

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

            }, 3000);
        };

    </script>
</body>

</html>


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

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