[js] 버튼 클릭시 마다 이미지 변경 구현 (ft . onclick addEventListener)

 

자바스크립트를 이용하여

이미지들을 사용하여 클릭할 때마다

이미지를 변경을 구현하겠습니다.

 

화면 출력내용

· 총 8개의 이미지· 총 8개의 이미지 사용
· 첫 화면에는 이미지 1번 나옴
· 버튼 2개 사용(다음, 이전)
· 다음버튼 클릭 시 다음 이미지 순서대로 나타남
· 이전버튼 클릭 시 이전 이미지 순서대로 나타남
· 마지막 8번째 이미지 다음 버튼 클릭 시 return문을 사용하여 강제 종료
· 처음 1번째 이미지 이전버튼 클릭 시 return문을 사용하여 강제 종료

 

클릭시마다 이미지 변경 예제1

· click 이벤트를 onclick를 이용하여 구현
· 각자 저장되어있는 이미지 8장 사용
-> 이미지 사용이 번거로우신 분들은 예제2번으로 이동해주세요

 

html

<div id="galleryCont">
  <p><img src="images/img01.jpg" id="photo" alt="이미지"></p>
  <p>
    <button onclick="changePic(0);">이전</button>
    <button onclick="changePic(1);">다음</button>
  </p>
</div>

 

css

*{margin: 0;padding: 0;}
#galleryCont {text-align: center;}
button {width: 100px;height: 30px;}

 

javascript

var num = 1;

function changePic(idx) { ///idx라는 매개변수를 사용한 changePic 이름의 함수 생성
  if (idx) {
    if (num == 8) return; //num이 8일때 num++ 이전에 강제종료 
    num++; //다음 버튼을 누르면 idx값이 1이 되어 num의 값이 1만큼 증가
  } else {
    if (num == 1) return; //num이 0일때 num-- 이전에 강제종료
    num--; //이전 버튼을 누르면 idx값이 0이 되어 num의 값이 1만큼 감소
  }
  var imgTag = document.getElementById("photo");
  imgTag.setAttribute("src", "images/img0" + num + ".jpg"); //id값이 photo인 이미지태그 선택 후, 
  //src 속성값을 수정
}

 

화면 결과

 

클릭시마다 이미지 변경 예제2

· click 이벤트를 addEventListner를 이용하여 구현
· placeimg 사이트 이용하여 실시간 인터넷으로 아무거나 가져옴

 

css

.picBox {
  width: 100%;
}

.picBox img {
  display: block;
  margin: 20px auto
}

.picBox .btn {
  width: 130px;
  margin: 0 auto;
}

 

html / javascript

 <div class="picBox">
     <img class="pic" src="https://placeimg.com/200/200/1" />
     <div class="btn">
       <button class="beforeBtn">before</button>
       <span class="picNo">1</span>
       <button class="afterBtn">after</button>
     </div>
   </div>

   <script>
     let pic = document.querySelector(".pic");
     let picNo = document.querySelector(".picNo");

     let i = 1;
     
	//after버튼 클릭시
     document.querySelector(".afterBtn").addEventListener('click', function(idx) {

       if (idx) {
         if (i == 8) return;    //조건이 참일때만 실행(i = 8 이면 return 실행)
         i++;    //항상 실행
       }
       pic.setAttribute("src", "https://placeimg.com/200/200/" + i);  
       picNo.innerHTML = i;    //이미지번호

     });
     
	//before버튼 클릭시
     document.querySelector(".beforeBtn").addEventListener('click', function(idx) {

       if (idx) {
         if (i == 1) return;
         i--;
       }
       pic.setAttribute("src", "https://placeimg.com/200/200/" + i);    
       picNo.innerHTML = i;    //이미지번호
     });

   </script>

 

한번에 보기(Result 클릭)

 

return문

return문은 함수에서 결괏값을 반환할 때 사용합니다.
함수에서 return문이 실행되면 반복문의 break문과 비슷하게 코드가 강제로 종료됩니다.
즉 함수 정의문에 return문이 사용되면 함수를 호출했을 경우 결괏값을 반환합니다.

setAttribute 메서드

setAttribute("속성 값", "새 값) 메서드는 선택한 태그의 지정한 속성을 새 값으로 바꿉니다.