[JavaScript] img src 변경하기

1. img 요소 가져오기 : 이 때 script가 해당하는 html(mainImg) 이후에 있어야 읽힌다.

이는 script를 읽는 도중에는 html이 안읽히기 때문, (javascript로 html 생성이 가능하기 떄문에 html read를 잠시 멈춤)

관련한 블로그 글 : https://blogpack.tistory.com/1087

document.getElementById("mainImg")
//또는
$('#mainImg')

2. src 바꾸기

document.getElementById("mainImg").src = "원하는 img 경로 또는 주소"
//또는
$('#mainImg').src = "원하는 img 경로 또는 주소"

 

<div class="frame" style="width: 500; height: 500;">
<img id="mainImg" src="http://t3.gstatic.com/licensed-image?q=tbn:ANd9GcT7VqeZWfre47P67CoSK72_cPsEIEE4qmDBLgEL1_4EYRQdjmV44NIjF8rVpNvrqzE2QPQcwMC_2JJDq2k" width="100%" />
</div>
<script>
            var files = ["http://t3.gstatic.com/licensed-image?q=tbn:ANd9GcT7VqeZWfre47P67CoSK72_cPsEIEE4qmDBLgEL1_4EYRQdjmV44NIjF8rVpNvrqzE2QPQcwMC_2JJDq2k",
                "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Crested_gecko-mars.jpg/1200px-Crested_gecko-mars.jpg",
                "https://m.zools.co.kr/web/product/medium/202202/a8786c860b61f00333242f22935d7996.jpg",
                "https://monsterpet.co.kr/data/item/21091710/W21.091710_m_400_RLW_16.4g_0428_g32.jpg",
                "https://m.zools.co.kr/web/product/medium/202202/91756ee8f59af74641838b4960ee4c5e.jpg",
                "https://blog.kakaocdn.net/dn/ezOnBM/btq67OyYV3f/Kh2laMtW0Ky9YTyoqzGJk0/img.png"
            ];

            var next = 0;
            function change(img) {
                img.src = files[next];
                setTimeout(10);
                document.getElementById("img-title").textContent = files[next];
                next++;
                next = next % files.length;
                console.log(img.src);
            };


            setInterval(() => { change(document.getElementById("mainImg")) }, 1000);
</script>