[HTML / CSS / JS] input / label 사용해서 이미지 슬라이드 만들기

 -최종 결과

최종 결과

최종 결과

자바스크립트를 이용하여 input이 활성화되면 전체 영역(img_content)의 배경 이미지가 바뀌게 한다.

HTML && CSS 코드 보러 가기

 

 

-HTML

1. value 값 추가

<div id="img_content">
    <input type="radio" name="img_select" id="select_box1" checked value="1">
    <label for="select_box1" class="label_click"></label>
    <input type="radio" name="img_select" id="select_box2" value="2">
    <label for="select_box2" class="label_click"></label>
    <input type="radio" name="img_select" id="select_box3" value="3">
    <label for="select_box3" class="label_click"></label>
    <input type="radio" name="img_select" id="select_box4" value="4">
    <label for="select_box4" class="label_click"></label> 
    <!-- img영역 -->
    <div id="imgbox">
      <div class="select_img select1">
        <img src="eximg1.jpg" alt="">
      </div>
      <div class="select_img select2">
        <img src="eximg2.jpg" alt="">
      </div>
      <div class="select_img select3">
        <img src="eximg3.jpg" alt="">
      </div>
      <div class="select_img select4">
        <img src="eximg4.jpg" alt="">
      </div>
    </div>
  </div>

<input value = "0"> 

각각의 input에 value값을 넣는다. 자바스크립트에서 input의 value값으로 어떤 input을 클릭하는지 알게 하기 위해

 

 

-Javascript

1. HTML 태그 선택하기

var changeImgBtn = document.getElementsByTagName('input');
var outBackground = document.getElementById('img_content');
var backImg = ['url(eximg1.jpg)', 'url(eximg2.jpg)', 'url(eximg3.jpg)','url(eximg4.jpg)'];

var changeImgBtn = document.getElementsByTagName('input')

input 태그가 다수 이므로 TagName으로 가지고 온다. TagName으로 가지고 올 경우 유사 배열로 잡힌다.

 

var outBackground = document.getElementById('img_content')

전체 영역을 변수에 담는다. 해당 영역의 이미지를 바꾸기 위해서이다.

 

var backImg = ['url(eximg1.jpg)', 'url(eximg2.jpg)', 'url(eximg3.jpg)','url(eximg4.jpg)']

바꾸고 싶은 이미지를 배열에 넣는다.

 

2. 클릭 시 이미지 변경하기

function imgChange(){
    for(var i = 0; i < changeImgBtn.length; i++){
        changeImgBtn[i].addEventListener('click',function(){
            if(this.value == 1){
                outBackground.style.backgroundImage = test[0];
            }else if(this.value == 2){
                outBackground.style.backgroundImage = test[1];                
            }else if(this.value == 3){
                outBackground.style.backgroundImage = test[2];                
            }else if(this.value == 4){
                outBackground.style.backgroundImage = test[3];                
            }
        })
    }
}

imgChange();

function imgChange(){}

imgChange이름을 가진 함수를 선언한다. 마지막에 imgChange()로 호출해야 함수가 동작한다.

 

for(var i = 0; i < changeImgBtn.length; i++){}

반복문을 통하여 changeImgBtn의 개수만큼 반복하여 changeImgBtn을 가지고 온다. changeImgBtn 개수는 4개이다.

 

changeImgBtn[i].addEventListener('click',functionchangeImgBtn [i]. addEventListener('click', function(){})

addEventListener('click', function(){})을 이용하여 changeImgBtn을 클릭할 때 이벤트가 발생하게 한다.

 

if(this.value == 0){outBackground.style.backgroundImage = backImg [0];}

여기서 this는 changeImgBtn을 가리킨다.

this는 함수 호출 위치에 따라 달라진다. 어떤 input을 클릭하는지 HTML에서 입력한 value값으로 구분한다.

changeImgBtn의 value값이 0인 경우 outBackground의 이미지를 backImg에 담긴 배열 값으로 바꾼다. backImg [0]는 'url(eximg1.jpg)' 값을 가리킨다. 

 

else if(this.value == 1){ outBackground.style.backgroundImage = backImg[1backImg [1]; }

else if구문을 이용하여 다른 valuer값을 가지고 있는 input을 선택하고 value에 따른 backImg []의 배열 값을 지정해준다.