[JavaScript] rolling(롤링)을 이용한 그림 바꾸기

JS 관련/JavaScript

[JavaScript] rolling(롤링)을 이용한 그림 바꾸기

씨네 2022. 1. 12. 10:50

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
a>img {
	width: 50px;
	height: 50px;
}
#gallery {
	width: 200px;
	height: 200px;
}
p {
	width: 350px;
	height: 250px;
}
img {
	vertical-align: middle;
}
a {
	text-decoration: none;
}
</style>

<script type="text/javascript">
	var num = 1;

	function prevGallery() {
		num--;
		if (num < 1) {
			num = 6;
		}
		document.getElementById("gallery").src = "resources/image/img0" + num + ".png";
		// 이벤트 전파 막기
		return false;
	}

	function nextGallery() {
		num++;
		if (num > 6) {
			num = 1;
		}
		document.getElementById("gallery").src = "resources/image/img0" + num + ".png";
		return false;
	}
</script>

</head>
<body>
	<div id="gallerywrap">
		<p>
			<a href="http://www.naver.com" onclick="return prevGallery();"> <img
				alt="이전그림" src="resources/image/arrowleft.png">
			</a> <img id="gallery" alt="갤러리" src="resources/image/img01.png"> <a
				href="#next" onclick="nextGallery();"> <img alt="다음그림"
				src="resources/image/arrowright.png">
			</a>
	</div>
</body>
</html>

화살표도 이미지입니다! 제가 임의로 넣어 두었어요...!

이제 왼쪽 화살표를 누르면 이전이미지로 오른쪽 화살표를 누르면 다음이미지로 바뀌게 됩니다!

728x90