이미지나열& 타이머를 통한 이벤트_심화문제 !!
모두들 이번 문제까지 열심히 풀고 마스터 고고!!지정된 이미지배열을 for문안에서 after이벤트를 이용해서 순나열한다.
그리고, 타이머이벤트를 통해서 끝에서부터 하나씩 그림을 없애면서 경고창으로 이미지배열길이를 보여준다.
마지막으로, 이미지가 없어지면 타이머를 종료하도록 설정하는 문제.
우선, 제일 먼저 알아야할 것은
1) <script scr="jquery-3.2.1.min.js"></script> <script></script>가 작성되어 있는지 확인한다.
2) 현재 작성파일과 같은 경로에 jquery-3.2.1.min.js파일이 있는지 확인한다.
3) 있다면, 가장 먼저 JQuery시작문법으로 작성은 $(document).ready(function(){});를 해야한다.
4) 이미지배열을 통해 이미지를 브라우저에 보여주기위해서 경로설정을 잘 해야한다.
/폴더명/파일명 ==> IP주소:port/폴더명/파일명으로써, 공통부분 생략, 직접적으로 로딩할 파일의 폴더명/파일명
../폴더명/파일명 ==> 현재 작성페이지의 폴더에서 직접적으로 ../를통해 빠져나가서 로딩할 파일의 폴더명/파일명
5) setInterval(함수,밀리언초)를 통해 밀리언초마다 함수가 발생하도록 하는 타이머를 작성해야 한다.
이때, 작성해야할 함수의 내용으로는 사진이 마지막순서부터 차례대로 제거되도록 함수를 작성한다.
6) 이미지가 다 제거되었다는 것을,
이미지의 배열이 0이다라는 표현식으로 함수를 작성하고 그 안에 clearInterval(함수)를 작성한다.
(해석하자면,
타이머함수 setInterval을 통해 이미지의 배열이 0이되면 setInterval이 중지되도록 clearInterval을 쓴다. 이떄, setInterval을 중지하기위하여 함수자체를 변수로 저장하여 clearInterval의 매개변수로 설정한다)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src='jquery-3.2.1.min.js'></script>
<script>
$(document).ready(
function(){
//ready는 함수 한개만 받을 수 있고, imgArray배열은 function안에서 선언되야한다
var imgArray= ['../image/2.jpg',
'../image/google.png',
'../image/3.png',
'../image/chrome.jpg'];
//imgArray 4개 이미지 바디 차례대로 추가
//5개 이미지:
//img 태그 생성 - 추가
for(var i=0; i<imgArray.length; i++){
var newimg= "<img src=' "+ imgArray[i] + "'>";
//$('body').append(newimg);
$('img:last').after(newimg);
}
$('img').css('width','200px');
$('img').css('height','200px');
//========== 추가 ============
//0.5초마다 첫번째 이야기를 마지막 위치 이동
//setInterval(function(){
//$('body').append($('img:first'));}, 500);
//2초마다 마지막 이미지부터 1개씩 삭제
var timer = setInterval(function(){ //var timer를 하는 이유는 clearInterval을 쓰기위하여!
alert($('img').length); //test용
$('img:last').remove();
}, 2000);
if($('img').length==0){
clearInterval(timer); //다 없어지면 종료하도록!
}
});
</script>
</head>
<body>
<img src='../image/1.jpg'>
</body>
</html>
|
<코드결과>
(1)
(2)
(3)
타이머함수를 많이 사용하기 떄문에 setInterval과 clearInterval의 사용법을 잘 숙지하시기 바랍니다.
※ 무조건, setInterval을 변수로써 적용시켜서 clearInterval안에 넣으면 됩니다.
※ 함수안의 함수를 작성하는 것을 두려워하면 안된다.!!
※ $('img:last').remove()와 같이 선택자도 다양하게 표현가능! 여기를 눌러서 선택자표현도 다시 한 번 참고하세요
'WEB 기초 > Jquery' 카테고리의 다른 글
| 8. 지도 나타내기 (현재위치 화살표표시 & 위/경도 출력) (0) | 2018.04.21 |
|---|---|
| 7. navigator를 이용한 현재 위도,경도 출력하기 (0) | 2018.04.21 |
| 5. 버튼클릭 이벤트 (심화문제) (0) | 2018.04.19 |
| 4. jquery 이벤트 총정리 (on, off, one, click, mouseover, mouseout) (0) | 2018.04.18 |
| 3. Css 제어_응용하기 (0) | 2018.04.16 |