레이아웃 슬라이드 이미지 만들기
이미지는 sliderWrap 안에 있습니다.
완성화면
오른쪽에 있는 총 3개의 이미지가 서서히 생기는 이미지 슬라이드 입니다.
jquery와 javascript 를 사용하여 이 애니메이션을 할 수 있습니다.
javascrip / jquery 를 따로따로 작성하여 한 줄씩 분석해보겠습니다!
1
2
3
4
5
6
7
8
9
10
11
12
13
| $(function () {
let currentIndex = 0;
setInterval(() => {
let nextIndex = (currentIndex + 1) % 3 // 나누기 3 함
$(".slider").eq(currentIndex).fadeOut(1200);
$(".slider").eq(nextIndex).fadeIn(1200);
currentIndex = nextIndex;
}, 3000);
});
|
간단한 이미지 슬라이더의 기능을 수행하는 jquery 코드입니다.
바로 코드를 분석해보겠습니다.
- 이 줄은 문서가 준비된 후에 코드를 실행하는 jQuery의 준비 핸들러입니다.
이는 HTML 문서의 모든 DOM 요소들이 로드된 후에 코드가 실행되어야 할 때 사용됩니다.
1
| let currentIndex = 0; // 현재 이미지 설정
|
- let currentIndex = 0;: 현재 표시되고 있는 이미지의 인덱스를 0으로 설정합니다. 이는 첫 번째 이미지부터 슬라이드를 시작한다는 것을 의미합니다.
- setInterval 함수는 지정된 시간 간격(여기서는 3000밀리초, 즉 3초)마다 함수를 반복 실행합니다.
이 코드는 슬라이더를 자동으로 전환하기 위해 사용됩니다.
1
| let nextIndex = (currentIndex + 1) % 3 // 나누기 3 함
|
- 다음 슬라이더의 인덱스를 계산합니다.
currentIndex + 1을 3으로 나눈 나머지를 nextIndex로 설정함으로써 인덱스가 0, 1, 2 중 하나가 되도록 합니다.
이는 슬라이더가 세 개라고 가정할 때 순환적으로 동작하도록 합니다.
1
| $(".slider").eq(currentIndex).fadeOut(1200);
|
- jQuery의 fadeOut 함수를 사용하여 현재 슬라이더를 1.2초 동안 점차적으로 사라지게 합니다.
.slider 클래스를 가진 요소 중 currentIndex에 해당하는 요소가 대상입니다.
1
| $(".slider").eq(nextIndex).fadeIn(1200);
|
- fadeIn 함수를 사용하여 다음 슬라이더를 1.2초 동안 점차적으로 나타나게 합니다.
.slider 클래스를 가진 요소 중 nextIndex에 해당하는 요소가 대상입니다.
1
| currentIndex = nextIndex;
|
- currentIndex를 nextIndex로 업데이트하여 다음 반복에서 현재 슬라이더로 사용될 수 있도록 합니다.
- setInterval 함수에 의해 설정된 시간 간격이 끝나는 부분과 jQuery 문서 준비 블록의 끝을 나타냅니다.
여기서 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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
| <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slide-4</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
#main {
width: 100%;
height: calc(100vh - 120px);
display: flex;
}
#header {
width: 200px;
height: 100%;
background-color: #e4adff;
}
#header .logo {
height: 10%;
background-color: #d59be1;
}
#header .nav {
height: 90%;
background-color: #ff74f3;
}
#contents {
width: 400px;
height: 100%;
background-color: #ff85c6;
}
#contents .banner {
height: 15%;
background-color: #ffbbea;
}
#contents .notice {
height: 35%;
background-color: #ffa0e2;
}
#contents .gallery {
height: 35%;
background-color: #e29fff;
}
#contents .link {
height: 15%;
background-color: #ed86ff;
}
#slider {
width: calc(100% - 600px);
height: 100%;
background-color: #ebbcf3;
}
#footer {
width: 100%;
height: 120px;
display: flex;
}
#footer .footer1 {
width: 20%;
height: 120px;
background-color: #f3a0e0;
}
#footer .footer2 {
width: 80%;
height: 120px;
background-color: #d5b3d7;
}
#footer .footer2 .footer2-1 {
width: 100%;
height: 60px;
background-color: #ff9ece;
}
#footer .footer2 .footer2-2 {
width: 100%;
height: 60px;
background-color: #f36cb0;
}
.sliderWrap {
position: relative;
height: 100%;
}
.sliderWrap>div {
display: none;
}
.sliderWrap>div:first-child {
display: block;
}
.sliderWrap .slider {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url(../webd/img/slide.04.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.sliderWrap .slider.s1 {
background-image: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider04.jpg);
}
.sliderWrap .slider.s2 {
background-image: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider05.jpg);
}
.sliderWrap .slider.s3 {
background-image: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider06.jpg);
}
.sliderWrap .slider span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.4);
padding: 10px 20px;
}
</style>
</head>
<body>
<div id="wrap">
<main id="main">
<header id="header">
<h1 class="logo"></h1>
<h1 class="menu"></h1>
</header>
<!-- <//header> -->
<section id="contents">
<article class="banner"></article>
<article class="notice"></article>
<article class="gallery"></article>
<article class="link"></article>
</section>
<!-- //contents -->
<div id="slider">
<div class="sliderWrap">
<div class="slider s1">
<span>이미지1</span>
</div>
<div class="slider s2">
<span>이미지2</span>
</div>
<div class="slider s3">
<span>이미지3</span>
</div>
</div>
</div>
</artcle>
<!-- //slider -->
</main>
<!-- //main -->
<footer id="footer">
<div class="footer1"></div>
<div class="footer2">
<div class="footer2-1"></div>
<div class="footer2-2"></div>
</div>
</footer>
<!-- //footer -->
</div>
<!-- //main -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(function () {
let currentIndex = 0;
setInterval(() => {
let nextIndex = (currentIndex + 1) % 3 // 나누기 3 함
$(".slider").eq(currentIndex).fadeOut(1200);
$(".slider").eq(nextIndex).fadeIn(1200);
currentIndex = nextIndex;
}, 3000);
});
</script>
</body>
</html>
|
오른쪽에 있는 총 3개의 이미지가 서서히 생기는 이미지 슬라이드 였습니다.
