HTML CSS JS
(HTML/CSS/JS) 사진 갤러리 만들기
혀래이
2021. 8. 17. 11:24
- 웹사이트를 돌아다니다 보면 < > 버튼이 있고 누를 때 마다 사진이 변경되는 기능이 있다.
예를 들면 네이버 메인페이지의 우측에 쇼핑 탭이 그러한데 이런식으로 되어있다.
- 버튼을 눌렀을 때, 다음 사진 or 이전 사진을 보여주는 기능을 만들어보자.
- HTML로 틀을 만들어주는데, 사진을 미리 모두 넣어두고 CSS에서 hidden으로 숨겨놓았다가 버튼을 클릭하면 순서를 바꿔가며 사진을 보여주게 끔 만들었다.
- 사진을 순서대로 보여주기 위한 Jquery의 insertBefore() , insertAfter() 함수, CSS의 overflow(고정된 틀 이상을 넘치는 사진들을 hidden으로 지정) 등등을 활용했다.
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>갤러리형사진</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
width: 250px;
}
.page, .page_n{
margin: 10px;
}
#container .page button{
border: 1px solid red;
background: pink;
width: 20px;
height: 20px;
overflow: hidden;
}
#container .photo{
width: 620px;
height: 370px;
border: 1px solid black;
overflow: hidden;
}
</style>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var totalNum=$(".photo > div").length;
var cNum = 1;
$(".page_n > span:first").text(cNum);
$(".page_n > span:last").text(totalNum);
$(".btn1").click(function(){
cNum--;
if(cNum < 1){
cNum = totalNum;
}
$(".page_n > span:first").text(cNum);
$(".photo div:last").insertBefore(".photo div:first");
});
$(".btn2").click(function(){
cNum++;
if(cNum > totalNum){
cNum = 1;
}
$(".page_n > span:first").text(cNum);
$(".photo div:first").insertAfter(".photo div:last");
});
});
</script>
</head>
<body>
<div id = "container">
<div class="page">
<span class="page_n">
<span></span> / <span></span>
</span>
<button class="btn1"><</button>
<button class="btn2">></button>
</div>
<div class="photo">
<div><img alt = "첫번째 사진" src = "img/chicken.jpg"></div>
<div><img alt = "두번째 사진" src = "img/jajang.jpg"></div>
<div><img alt = "세번째 사진" src = "img/pizza2.jpg"></div>
</div>
</div>
</body>
</html>
|
cs |
