[WEB]이미지 애니메이션 뷰어 제작
2019. 9. 8. 11:18ㆍWeb
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body {
font-size: 9pt;
}
.panel {
width: 840px;
height: 415px;
border: 1px solid #ccc;
}
.nav {
width: 840px;
text-align: center;
}
</style>
<script src="../libs/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
imageAnimationViewer();
})
function imageAnimationViewer() {
var $view = null;
var currentIndex = 1;
var frameDuration = 100;
var timerID = null;
function init() {
$view = $("#view");
}
function initEvent() {
$("#play").click(function() {
startAutoPlay();
})
$("#stop").click(function() {
stopAutoPlay();
})
$("#next").click(function() {
nextImage();
})
$("#prev").click(function() {
prevImage();
})
}
function startAutoPlay() {
timerID = setInterval(function () {
nextImage();
}, frameDuration)
}
function stopAutoPlay() {
clearInterval(timerID);
}
function nextImage() {
currentIndex ++;
if(currentIndex >= 61) {
currentIndex = 1;
}
var imageName = "./images/" + currentIndex + ".jpg";
$view.attr("src", imageName);
}
function prevImage() {
currentIndex --;
if(currentIndex < 1) {
currentIndex = 60;
}
var imageName = "./images/" + currentIndex + ".jpg";
$view.attr("src", imageName);
}
init();
initEvent();
}
</script>
</head>
<body>
<div class="panel">
<img src="./images/1.jpg" id="view">
</div>
<div class="nav">
<button id="play">
play
</button>
<button id="stop">
stop
</button>
<button id="prev">
prev
</button>
<button id="next">
next
</button>
</div>
</body>
</html>
'Web' 카테고리의 다른 글
| JavaScript 클래스 정의 방법 비교 (0) | 2019.09.14 |
|---|---|
| [WEB] 텍스트 스크롤러 만들기 (0) | 2019.09.07 |
| HTML <style type = "text/css"> 의문점 (0) | 2019.08.07 |