layout 디자인 - jquery
레이아웃 슬라이드 이미지 만들기
완성화면
가운데에 있는 총 3개의 이미지가 오른쪽에서 왼쪽으로 슬라이딩 하는 형태의 이미지 슬라이드 입니다
jquery와 javascript 를 사용하여 이 애니메이션을 할 수 있습니다. javascrip / jquery 를 따로따로 작성하여 한 줄씩 분석해보겠습니다!
이미지 슬라이드를 만들기 위해 구조를 간단하게 설명해드릴게요!
위 사진과 아래 사진을 같은 색으로 구분해놨습니다!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(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);
});
간단한 이미지 슬라이더의 기능을 수행하는 jquery의 코드입니다.
바로 코드를 분석해보겠습니다.
초기 설정 및 첫 번째 이미지 복제
1
$(".sliderWrap").append($(".slider").first().clone(true));
$(function () {...});는 문서가 전체적으로 로드된 후에 실행되도록 하는 jQuery의 준비 핸들러입니다.
let currentIndex = 0;는 현재 보여지고 있는 이미지의 인덱스를 저장하는 변수입니다. 첫 번째 이미지부터 시작합니다.
$(".sliderWrap").append($(".slider").first().clone(true));는 슬라이더의 첫 번째 이미지를 복제하여, 이 복제본을 .sliderWrap 요소의 마지막에 추가합니다. clone(true)는 이벤트 핸들러와 데이터를 포함하여 복제하라는 명령입니다.변수입니다. 초기 값은 0으로, 첫 번째 이미지부터 시작합니다.
1
2
3
4
5
setInterval(function () {
currentIndex++; // 현재 이미지를 1씩 증가
$(".sliderWrap").animate({ marginLeft: -currentIndex * 100 + "%" }, 600);
...
}, 3000);
setInterval(function () {...}, 3000);는 주어진 함수를 매 3초마다 반복적으로 실행합니다. 이는 이미지가 주기적으로 교체되도록 합니다. currentIndex++;는 슬라이더의 현재 위치를 나타내는 currentIndex 변수를 1씩 증가시켜 다음 이미지로 넘어가도록 합니다.
$(".sliderWrap").animate({ marginLeft: -currentIndex * 100 + "%" }, 600);는 .sliderWrap 요소의 CSS marginLeft 속성을 애니메이션으로 조정하여 슬라이더를 왼쪽으로 이동시킵니다. 이동 비율은 현재 이미지 인덱스에 기반하여 계산되며, 600ms 동안 완료됩니다.
1
2
3
4
5
6
if (currentIndex == 3) { // 마지막 이미지일 때
setTimeout(function () {
$(".sliderWrap").animate({ marginLeft: 0 }, 0); // 애니메이션을 정지
currentIndex = 0; // 현재 이미지를 초기화
}, 700);
}
if (currentIndex == 3) {…}는 currentIndex가 3일 때, 즉 마지막 이미지에 도달했을 때 특별한 처리를 수행합니다. 여기서 3은 이미지의 총 개수를 나타내며, 추가된 첫 번째 이미지의 복제본을 고려한 값입니다.
setTimeout(function () {…}, 700);는 700밀리초 후에 한 번 실행되는 타이머를 설정합니다.
이 내부에서 .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
<!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 였습니다.
다음시간에 계속…
This post is licensed under CC BY 4.0 by the author.