Java script - 4 (2021.03.23) 이미지 슬라이드

1sec.css

0.00MB

1sec.html

0.00MB

오늘 수업 막바지에 이미지 슬라이드 만들었다.  

 

우선 이미지를 준비했다. 고양이, 소, 여우, 쥐 

 

사진이름 붙이기 쉽게 알파벳 3개짜리 동물을 찾아봤다. 그런데 쥐 사진은 좀 귀여워서 mouse로 붙여줬다. 

 

html과 css는 어렵지 않게 만들었다. 

<ul id="frame">
            <li class="pic" ><img src="./images/cat.jpg"></li>
            <li class="pic" ><img  src="./images/cow.jpg"></li>
            <li class="pic" ><img  src="./images/fox.jpg"></li>
            <li class="pic" ><img src="./images/mouse.jpg"></li>
        </ul>

 

ul,li{ list-style: none;}

#frame{
    width: 500px;
    height: 500px;
    overflow: hidden;
}

#frame>li>img{
    display: inline-block;
    width: 500px;
    height: 500px;
}

그 다음 자바스크립트를 작성하면 되는데, 어떻게 해야할지 감을 못 잡아서 일단 그냥 손이 가는대로 타이핑했다.  

 아무렇게나 막 쓰고 지우고 해서 뭘 했는지 기억도 안 난다.  그 짧은 시간 동안 절대 못할 것 같다는 생각을 계속했는데 그렇다고 가만히 있을 수도 없고, 그냥 또 생각나는대로 치다가 잠깐 확인했는데 성공했다. 코드는 다음과 같다. 

<script type = "text/javascript">

     function changelist(){
        pictureBox = document.querySelector('#frame');
        picture = document.querySelector('.pic');
        pictureBox.appendChild(picture); 
        // pictureBox = document.querySelector('#frame');
        // pikture = document.querySelectorAll('#frame>li');
        // pictureBox.appendChild(pikture[0]);
        
     }

    setInterval(changelist,3000); 
    </script>

이런 일을 두고 소 뒷걸음 치다 쥐 잡는다고 표현하는데,  마침 이미지 슬라이드에 지나가는 소랑 쥐. 

앞으로 이미지가 필요할 때는 소 이미지나 쥐 이미지를 써야겠다.  

 

---

Document.querySelector()

제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환한다. 일치하는 요소가 없으면 null을 반환한다. 

 

pictureBox = document.querySelector('#frame');

 #frame이라는 id를 가진 ul엘리먼트를 pictureBox 변수에 대입.

 
 picture = document.querySelector('.pic');

.pic 라는 class를 가진 "li 엘리먼트 중 첫번째 엘리먼트"를  picture변수에 대입  

 pictureBox.appendChild(picture); 

 처음으로 picture가 가리키는,  제일 위에 있는 li 엘리먼트(고양이)가 자식노드로 연결되면서 맨 아래로 떨어짐. 

 

 setInterval(changelist,3000);

3초 후에 changelist가 호출되고, 그 때  제일 위에 있는 li 엘리먼트(소)가 자식노드로 연결되면서 아래로 떨어짐.

 

  그런데 changelist로 고양이를 떨궜으니까 소 사진이 제일 먼저 나와야 하는 거 아닌가? 아니다. 

몇 가지 실험을 해보니까  저 setInterval은  '함수실행-인터벌-실행-인터벌-실행-인터벌-...' 이 아니라 

'인터벌- 실행- 인터벌- 실행- 인터벌- 실행-...' 이다.

 

setInterval(함수, 시간);

시간- 함수-시간- 함수 - 시간 - 함수 - ...

 

---

위는 운 좋게 얻어 걸린거고,  다음과 같은 메서드를 사용해야 더 많은 가능성이 있다. 

 

Document.querySelectorAll() 

 지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적(살아 있지 않은) NodeList 를 반환한다. 

  (배열로 반환한다고 이해하면 될듯.) 

 

 pictureBox = document.querySelector('#frame');

 이건 위랑 똑같고. 
 

pikture = document.querySelectorAll('#frame>li');

 #frame 하위에 있는 li 엘리먼트를 배열로 반환하여 변수에 대입.

                        [Element,Element,Element,Element] 

 

pictureBox.appendChild(pikture[0]);

pikture[0](고양이🐱)가 자식노드로 추가하면서 아래로 떨어진다. 

 

다시 함수가 호출되면  pikture[0]은 소🐮가 되고 자식노드로 추가되면서 떨어진다. 

 

document.querySelectorAll은 배열 인덱스로 각 li 엘리먼트를 지정할 수 있어 버튼을 만들어 조작하고자 할 때 유용하다.  

 

 

+++) appendChild, removeChild 정리하기.