<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style>
div {
margin: 0px auto;
text-align: center;
width: 100%;
}
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<button>
<img id="img" src="./IMG/ev.png">
</button>
<br />
<button id="pre">이전</button>
<button id="next">다음</button>
</div>
<script type="text/javascript">
var img = document.getElementById('img');
var pre = document.getElementById('pre');
var next = document.getElementById('next');
var arr = [ 'firee', 'ggobugi', 'leesanghaessee', 'pikachu', 'ev' ];
var index = 0;
next.addEventListener('click', function() {
img.src = "./IMG/" + arr[index++] + ".png";
if (index >= arr.length) {
index = 0;
}
})
pre.addEventListener('click', function() {
img.src = "./IMG/" + arr[index--] + ".png";
if (index < 0) {
index = arr.length - 1;
}
})
</script>
</body>
</html>