자바스크립트 이미지 바꾸기

오늘 예제는 자바스크립트 이미지 바꾸기 기능을 구현해보도록 하겠습니다.

주요 핵심은 클릭할 때마다 다른 이미지가 나오게 해야 하므로 반복문을 사용하는 것입니다. 또한, 클릭한 이미지의 주소를 가져와서 메인 이미지에 넣어야 하므로 관련된 문법을 숙지해야 합니다.

자바스크립트 이미지 바꾸기

목차


자바스크립트 이미지 바꾸기 코드

   <div class="container">
     <h2>이미지 바꾸기</h2>
     <div class="image--big">
       <img id="bigImage" src="images/microphone.jpg" alt="이미지1" title="이미지1">
     </div>
     <div class="image--small">
       <img src="images/north-america.jpg" name="smallIamge" alt="이미지2" title="이미지2">
       <img src="images/store.jpg" alt="이미지3" name="smallIamge" title="이미지3">
       <img src="images/waterfall.jpg" alt="이미지4" name="smallIamge" title="이미지4">
     </div>
   </div>
img{
 width: 100%;
 height:100%;
}

.container{
 display:flex;
 flex-direction: column;
 align-items:center;
}

.image--big{
 width: 450px;
 height: 300px;
 margin-bottom:20px;
}

.image--small{
 display:flex;
 justify-content:center;
 width: 150px;
 height: 150px;
}

.image--small > img{
 margin-right: 10px;
}
let bigImage = document.querySelector("#bigImage");
let smallIamge = document.querySelectorAll('[name="smallIamge"]');

changeImage = (e) =>{
 let imageSrc = e.target.src;
 bigImage.setAttribute('src',imageSrc)
}

for(let i=0;i<smallIamge.length;i++){
 smallIamge[i].addEventListener('click',changeImage);
}

코드 보기


자바스크립트 이미지 바꾸기 설명

이 예제의 핵심은 클릭한 작은 이미지 주소를 메인 이미지로 바꾸는 기능을 구현하는 것입니다.

let bigImage = document.querySelector('#bigImage');
let smallImage = document.querySelector('[name="smallImage"]');

메인 이미지와 name값이 smallImage를 모두 저장합니다.

for(let i=0;i<smallImage.length;i++){
  smallImage[i].addEventListener('click',changeIamge);
}

작은 이미지는 총 3개로 반복문을 사용하여 changeImage 함수를 실행해줍니다.

changeImage = (e) =>{
  let imageSrc = e.target.src;
  bigImage.setAttribue('src',imageSrc);
}

changeImage 함수에서 매개변수를 선언하여 target에서 주소를 가져옵니다. 이를 저장하고 요소의 속성값을 지정해주는 setAttribute를 사용합니다.

다른 글 보기

Leave a Comment