[ jQuery ] 배너형 갤러리 만들기

2022. 2. 23. 13:07ㆍjQuery

 

 

 

위에 영상 처럼 팝업창 생성하는 방법을 알아보자!

 

 

 

1) 압축을 풀어준다.

 

 

Lightbox.zip
0.01MB

 

 

2) Webapp 하단에 삽입해주기!

 

 

 

 

 

 

 

 

 

< CSS >

 

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

#wrap {
	width: 300px;
	margin: 0 auto;
}

#wrap .page {
	text-align: right;
	margin: 5px;
}

#wrap .page .info {
	display: inline-block;
	margin: 10px;
}

#wrap .page button {
	border: none;
	background: white;
	color: darksalmon;
	width: 25px;
	height: 25px;
}

#wrap .image {
	width: 150px;
	height: 150px;
	border: 2px solid black;
	overflow: hidden;
}
</style>

 

 

<HTML >

 

<div id="wrap">
		<div class="page">
			<span class="info"> <span></span> / <span></span>
			</span>
			<button class="prev">&lt;</button>
			<button class="next">&gt;</button>
		</div>
		<div class="image">
			<div>
				<img alt="1" src="image/pic01.jpg">
			</div>
			<div>
				<img alt="2" src="image/pic02.jpg">
			</div>
			<div>
				<img alt="3" src="image/pic03.jpg">
			</div>
		</div>
	</div>

 

 

< Java Script >

 

	<script src="https://code.jquery.com/jquery-3.6.0.min.js"
		integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
		crossorigin="anonymous"></script>

	<script type="text/javascript">
	
		$(document).ready(function() {
			var totalNum = $('.image>div').length; //querySelectorAll();
			var currNum = 1;
			$(".info>span:first").text(currNum);
			$(".info>span:last").text(totalNum);
			$('.prev').click(function() {
				currNum--;
				if (currNum < 1) {
					currNum = totalNum;
				}
				$(".info>span:first").text(currNum);
				$(".image div:last").insertBefore(".image div:first");
			});
			$('.next').click(function() {
				currNum++;
				if (currNum > totalNum) {
					currNum = 1;
				}
				$(".info>span:first").text(currNum);
				$(".image div:first").insertBefore(".image div:last");
			});

		});
	</script>

 

 

 

 

< 전체 코드 >

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>갤러리(배너)</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

#wrap {
	width: 300px;
	margin: 0 auto;
}

#wrap .page {
	text-align: right;
	margin: 5px;
}

#wrap .page .info {
	display: inline-block;
	margin: 10px;
}

#wrap .page button {
	border: none;
	background: white;
	color: darksalmon;
	width: 25px;
	height: 25px;
}

#wrap .image {
	width: 150px;
	height: 150px;
	border: 2px solid black;
	overflow: hidden;
}
</style>

</head>
<body>

	<script src="https://code.jquery.com/jquery-3.6.0.min.js"
		integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
		crossorigin="anonymous"></script>

	<script type="text/javascript">
	
		$(document).ready(function() {
			var totalNum = $('.image>div').length; //querySelectorAll();
			var currNum = 1;
			$(".info>span:first").text(currNum);
			$(".info>span:last").text(totalNum);
			$('.prev').click(function() {
				currNum--;
				if (currNum < 1) {
					currNum = totalNum;
				}
				$(".info>span:first").text(currNum);
				$(".image div:last").insertBefore(".image div:first");
			});
			$('.next').click(function() {
				currNum++;
				if (currNum > totalNum) {
					currNum = 1;
				}
				$(".info>span:first").text(currNum);
				$(".image div:first").insertBefore(".image div:last");
			});

		});
	</script>

	<div id="wrap">
		<div class="page">
			<span class="info"> <span></span> / <span></span>
			</span>
			<button class="prev">&lt;</button>
			<button class="next">&gt;</button>
		</div>
		<div class="image">
			<div>
				<img alt="1" src="image/pic01.jpg">
			</div>
			<div>
				<img alt="2" src="image/pic02.jpg">
			</div>
			<div>
				<img alt="3" src="image/pic03.jpg">
			</div>
		</div>
	</div>
</body>
</html>

'jQuery' 카테고리의 다른 글

[ jQuery ] Masonry 플러그인하여 박스 애니메이션 효과 주기  (0) 2022.02.23
[ jQuery ] Light Box 사용하여 팝업창 만들기  (0) 2022.02.23
[ jQuery ] Drop down 메뉴바 만들기  (0) 2022.02.22
[ jQuery ] Infinite Scroll 무한 스크롤 이벤트 적용하기  (0) 2022.02.22
[ jQuery ] 라이브러리 CDN 방식으로 연결하기  (0) 2022.02.22

관련글

티스토리툴바