이미지나열& 타이머를 통한 이벤트_심화문제 !!

모두들 이번 문제까지 열심히 풀고 마스터 고고!!

지정된 이미지배열을 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의 매개변수로 설정한다)

4

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>
 

 