[javascript] 해당 src 속성 값 가져와 이미지 교체하기

html 구조

<div class="img_wrap">
    <img src="abc01.jpg" alt="큰이미지" id="big">
    <div class="small_img_wrap">
    	<img src="abc01.jpg" alt="작은이미지1" class="simg">
    	<img src="abc02.jpg" alt="작은이미지2" class="simg">
    	<img src="abc03.jpg" alt="작은이미지3" class="simg">        
    </div>
</div>

 

javascript

var bigImg = document.querySelector('#big'); //큰 이미지 가져오기
var sImg = document.querySelectorAll('.simg'); //작은 이미지들 노드 리스트로 가져옴

for(var i = 0; i < sImg.length; i++) {
    sImg[i].onclick = showImg;  //노드를 클릭하면 showImg 함수 실행
}

function showImg() {
    var newImg = this.src; //클릭 이벤트가 발생한 대상의 src 속성 값을 가져옴
    bigImg.setAttribute('src', newImg);  //newImg 값을 큰 이미지의 src 속성 값에 할당
    //또는 big.src = newImg; 도 가능
}


//또는 함수 실행하지 않고 하는 방법
for(var i = 0; i < sImg.length; i++) {
    sImg[i].onclick = function(e) {
    	bigImg.src = this.src;
    };
};