레이아웃 슬라이드 이미지 만들기
완성화면
가운데에 있는 총 3개의 이미지가 아래에서 위로 올라가는 이미지 슬라이드 입니다.
jquery와 javascript 를 사용하여 이 애니메이션을 할 수 있습니다. javascrip / jquery 를 따로따로 작성하여 한 줄씩 분석해보겠습니다!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| $(function () {
let currentIndex = 0; //현재 이미지 설정
$(".sliderWrap").append($(".slider").first().clone(true)); // 첫번째 이미지를 복사해서 마지막에 추가
setInterval(function () { //3초에 한번씩 실행 //0 3 6 9
currentIndex++; // 현재 이미지를 1씩 증가
$(".sliderWrap").animate({ marginTop: -currentIndex * 300 + "px" }, 600);
if (currentIndex == 3) { // 마지막 이미지
setTimeout(function () {
$(".sliderWrap").animate({ marginTop: 0 }, 0); // 애니메이션 초기화
currentIndex = 0; // 현재 이미지를 초기화
}, 700);
}
}, 3000);
});
|
간단한 이미지 슬라이더의 기능을 수행하는 jquery의 코드입니다.
바로 코드를 분석해보겠습니다.
- $(function () {…});은 문서가 전체적으로 로드된 후에 실행되는 jQuery의 준비 핸들러입니다. 이 구문은 문서가 준비된 상태 입니다.
1
| let currentIndex = 0; //현재 이미지 설정
|
- currentIndex 변수를 0으로 초기화합니다. 이 변수는 현재 표시되고 있는 이미지의 인덱스를 추적합니다.
1
| $(".sliderWrap").append($(".slider").first().clone(true)); // 첫번째 이미지를 복사해서 마지막에 추가
|
- .sliderWrap 선택자를 사용하여 이미지들을 감싸고 있는 컨테이너를 선택합니다. .slider 클래스를 가진 첫 번째 요소(이미지)를 찾아 복제하고(clone(true)), 이 복제본을 .sliderWrap의 마지막에 추가합니다.
true는 이벤트 핸들러와 데이터까지 함께 복사합니다.
1
| setInterval(function () { //3초에 한번씩 실행 //0 3 6 9
|
- setInterval 함수를 사용하여 주어진 함수를 3초(3000밀리초)마다 반복 실행합니다.
1
| currentIndex++; // 현재 이미지를 1씩 증가
|
- 슬라이더의 currentIndex를 1씩 증가시켜, 다음 이미지로 이동하도록 합니다.
1
| $(".sliderWrap").animate({ marginTop: -currentIndex * 300 + "px" }, 600);
|
- .sliderWrap의 marginTop을 사용하여 슬라이더를 수직으로 이동시킵니다. -currentIndex * 300 + “px”는 슬라이더가 각 이미지의 높이(300px 가정)만큼 위로 이동하도록 계산합니다. 이동은 600밀리초 동안 부드럽게 진행됩니다.
1
| if (currentIndex == 3) { // 마지막 이미지
|
- currentIndex가 3에 도달했다면, 즉 설정된 마지막 이미지에 도달했다면 추가 동작을 실행합니다. 이는 복제된 첫 번째 이미지가 마지막 이미지로 사용되었을 때의 인덱스입니다.
1
2
| setTimeout(function () {
$(".sliderWrap").animate({ marginTop: 0 }, 0); // 애니메이션 초기화
|
- 700밀리초 후에 슬라이더의 위치를 초기화합니다. marginTop을 0으로 설정하여 첫 번째 이미지 위치로 즉시 리셋합니다.
1
2
| currentIndex = 0; // 현재 이미지를 초기화
}, 700);
|
- currentIndex를 0으로 재설정하여 슬라이더를 처음부터 다시 시작하도록 합니다.
- setInterval의 종료 부분입니다. 이 블록 내의 코드가 3초마다 반복 실행됩니다.
전체 코드
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
| <!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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(function () {
let currentIndex = 0; // 현재 이미지
$(".sliderWrap").append($(".slider").first().clone(true)); // 첫번째 이미지를 복사, 마지막에 추가
setInterval(function () { // 3초에 한번씩 실행
currentIndex++; //현재 이미지를 1씩 증가
$(".sliderWrap").animate({ marginLeft: -currentIndex * 100 + "%" }, 600); // 이미지 애니메이션
if (currentIndex == 3) { // 마지막 이미지일 때
setTimeout(function () {
$(".sliderWrap").animate({ marginLeft: 0 }, 0); // 애니메이션을 정지
currentIndex = 0; // 현재이미지 초기화
}, 700);
}
}, 3000);
});
</script>d
</body>
</html>
|
이렇게 이미지를 하나 복사해서 오른쪽에서 왼쪽으로 슬라이딩 하는 형식의 jquery 였습니다.
다음엔 javascript 형식을 소개하도록 하겠습니다!
