<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS10.리턴-이미지갤러리.html</title>
<style>
*{margin:0; padding:0;}
#gallery {text-align:center;}
#gallery img {height:250px; margin:0 8px;}
</style>
<script>
var num = 1;
function showGallery(direct){
//direct에 0이 전달(이전 버튼 클릭하면)되면 false이고, 1 이 전달(다음 버튼을 클릭하면)되면 true이다.
if(direct == 1){ //다음 버튼 클릭: direct에 1이 전달될 때
if(num == 8) return; //함수 종료
num++;
}else{ //이전 버튼 클릭: direct에 0이 전달될 때
if(num == 1) return;
num--;
}
var img = document.getElementById('photo');
img.setAttribute('src', 'images/pic_'+num+'.jpg');
}
</script>
</head>
<body>
<div id="gallery">
<img src="images/pic_1.jpg" alt="gallery" id="photo">
<div>
<button onClick="showGallery(0)">이전</button>
<button onClick="showGallery(1)">다음</button>
</div>
</div>
</body>
</html>