JS

[JS] 자바스크립트 querySelectorAll 활용해서 이미지 바꾸기

져니져니95 2021. 3. 24. 12:40

2020.03.24(수)

블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 아홉째날

어제 오후시간에 해보라고 하셨던건데 난 결국 못했다ㅠ

배열에 대한 개념이 정립이 안되어있어서 그랬던 듯하다

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>puppy</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        #visual{
            width: 300px;
            height: 300px;
            border: 3px solid #000;
            overflow: hidden;
        }
        li{
            float: left;
        }
        ul{
            width: 1000px;
        }
        #puppy>li>img{
            width: 300px;
            height: 300px;
        }
    </style>

</head>
<body>
    <div id="visual">
        <ul id="puppy">
            <li><img src="data:image/jpeg;base64,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" alt=""></li>
            <li><img src="https://cdn.mkhealth.co.kr/news/photo/202007/img_MKH200723012_0.jpg" alt=""></li>
            <li><img src="data:image/jpeg;base64,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" alt=""></li>
        </ul>
    </div>
    <script type="text/javascript">
    function moving(){       
        puppy = document.querySelector('#puppy'); /* <ul>안에 있는 모든 것을 가져온다. */
        li = document.querySelectorAll('#puppy > li');
        puppy.appendChild(li[0]);
    }
    setInterval(moving,2000);
    </script>
</body>
</html>

 

li = document.querySelectorAll('#puppy > li'); -> querySelectorAll을 사용하면 puppy안에 있는 정보들을 각 속성값 형식 그대로 배열 형식으로 변환해준다. img들은 Element형식이었기때문에 [Element,Element,Element] 다음과 같은 형태로 가져오는 것!

 

setInterval(moving,2000); ->내가 설정한 함수를 2초마다 실행해주도록 설정한것이다!

(2000=2초, 3000=3초,4000=4초)

 

* 결과물