<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" > </script>
<script>
<!--
//count변수를 초기화 var를 붙이면 전역변수
//변수를 초기화 하지 않으면 쓰레기 값이 들어갈 수 있다
var nCount=0;//ani0.jpg ,ani1.jpg ,ani2.jpg ,ani4.jpg
var $img1=null; //<img id="img1"..>을 가리키는 변수로 사용하자
var $panel2=null;//<div id="panel">를 가리키는 변수
/* button.setOnClickListener(new OnClickListener(){
onClick(View v){
// 버튼을 클릭하면 여기있는 코드를 실행해라
}
}); 아래의 문장은 이 구조와 같으므로 눈여겨 봅니다 */
$(document).ready(function(){//문서를 다 읽고나면은 실행해라
init();
start();
});
function init(){
//왼쪽은 var $img1=null;로 선언했던변수, 변수를 초기화
$img1=$("#img1"); //id가 img1인 태크 css로 치면 #img1(width:300px)
}
function start(){
//setInterval(함수, 초 ms) 초마다 한번씩 함수를 호출한다
//setInterval(this.changeImage, 1000) 로 써도 좋다 ,()빼도 좋다
setInterval(changeImage, 2000);//2초마다 changeImage를 실행해라
}
function changeImage(){//2초마다 실행된다.
if(this.nCount>=5) nCount=0;// 0,1,2,3,4,0,1,2,3,4,0...
//<img src=".image/ani0.jpg" id="img1">
//id가 img1인 태그의 속성중에 src속성의 값을 2번째 파라미터로 바꿔라
this.$img1.attr("src", "image/ani"+ nCount + ".png");
nCount++ ;
}
//-->
</script>
</head>
<body>
<div>
<h4>미션3 - 2초에 한번씩 이미지를 순차적으로 변환시켜 주세요
<br/> 단, 이미지는 9개가 있습니다. 9개가 출력된 경우 다시 첫번째
이미지부터 출력시켜 주세요. </h4>
<div id="panel">
<img width="300px" height="300px"
id="img1" src="./image/ani0.png" alt="이미지">
</div>
<div id="panel2">
^^
</div>
</div>
</body>
</html>