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=5;
}
document.getElementById("gallery").src = "resources/image/img0"+ num + ".jpg";
//이벤트 전파 막기(jQuery에서 자세히 배움)
return false;
}
function nextGallery(){
num++;
if(num > 5){
num=1;
}
document.getElementById("gallery").src = "resources/image/img0"+ num + ".jpg";
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 alt="갤러리 그림" src="resources/image/img01.jpg" id="gallery"/>
<a href="#next" onclick="return nextGallery();">
<img alt="다음그림" src="resources/image/arrowright.png"/>
</a>
</p>
</div>
</body>
</html>
(배고팠던 관계로 칼국수 사진 5장...활용)
화살표를 누르면 저장된 사진 5개가 차례로 넘어가고 max인 5번째 사진에서 넘기면 첫번째 사진으로 넘어가도록
코드가 짜여있다. 만약 max사진 숫자가 다르다면 위 코드의 if문에서 숫자를 변경해주면 된다.
728x90
반응형
'Web > JavaScript' 카테고리의 다른 글
| [JS]node, nodelist (0) | 2020.07.28 |
|---|---|
| [JS]node, nodelist (0) | 2020.07.28 |
| [JS]closure (0) | 2020.07.28 |
| [JS]함수function_02 (0) | 2020.07.28 |
| [JS]함수Function_1 (0) | 2020.07.28 |
