JS_실습예제04_내장객체를 활용한 슬라이드 구현

실습예제04_내장객체를 랜덤 슬라이드 구현

1. 수학객체를 사용한 슬라이드

• 새로고침 시 이미지 랜덤 변경, 좌/우 버튼 클릭시 이미지 변경되는 슬라이드 구현하기

SPRING

봄 한 송이

    //1. 상품 이미지 배열 만들기
    let coupP = ['banner01.jpg','banner02.jpg','banner03.jpg','banner04.jpg','banner05.
    jpg'];

    //2. 변수생성
    const lbtn = document.getElementById('left_btn');
    const rbtn = document.getElementById('right_btn');
    let n = 0;

    //3. 좌/우 버튼 클릭 이벤트 생성
    lbtn.addEventListener('click',function(){
      // window.alert('left click test');
      if(n==0){
        n=7;
      }else{
        n--;
      }
      document.getElementById('coup_img').src='./images/math_'+coupP[n];
    });

    rbtn.addEventListener('click', function(){
      // window.alert('right click test');
      if(n==7){
        n=0;
      }else{
        n++;
      }
      document.getElementById('coup_img').src=`./images/math_${coupP[n]}`
    });

    //4. 새로 고침 시 랜덤 번호로 이미지 주소 변경
    //4-1. 0~9 까지의 랜덤 번호 생성
    let ranN = Math.floor(Math.random()*8);
    document.write(ranN);

    //4-2. 랜덤 번호를 사용해 이미지 주소 변경
    document.getElementById('coup_img').src=`./images/math_${coupP[ranN]}`;

2. 문자열 객체를 사용한 슬라이드

• 이미지 5장을 사용하여 섬네일 이미지 클릭시 해당 이미지가 나오도록 구현한다.

• 섬네일 이미지 클릭 시 함수를 활용하여 이미지 src 속성 값을 찾아 변수에 저장하고
메인 이미지 태그의 src 속성 값에 대입하여 이미지가 변겨오디도록 한다.

            // 2. 문자열 객체
            // 1. 변수 선언
            let s_img = document.querySelectorAll('.small'); //작은 이미지
            let b_img = document.getElementById('photo'); //큰 이미지
            let a = 0;
      
            // 2. 섬네일 이미지 클릭시 해당 src 주소값을 변수에 담기
            for(let a=0; aᐸ=s_img.length; a++){
              console.log(s_img[1]); //이미지 태그 출력 확인_5개인지
              s_img[a].addEventListener('click',change_img);
            }
      
            //change_img 함수 
            function change_img(){
              let imgUrl = this.src;
      
              //큰사진의 src 주소값에 위 변수값 대입하여 이미지 변경하도록 함
              b_img.src = b_img.src.replace(b_img.src, imgUrl);
            }