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

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

'JS 관련 > JavaScript' 카테고리의 다른 글

[JavaScript] Object(오브젝트 / 객체) (0)	2022.01.14
[JavaScript] DOM(돔) 구조 (0)	2022.01.13
[JavaScript] 명시적함수, 익명함수, 리터럴함수, 아규먼트 속성, 클로저 (0)	2022.01.11
[JavaScript] WINDOW객체에서 제공하는 대화형 함수(alert / confirm / prompt) (0)	2022.01.10
[JavaScript] var변수의 사용 및 타입 (0)	2022.01.09

'JS 관련 > JavaScript' 카테고리의 다른 글

티스토리툴바