icon_home

실습예제01 _ if문을 활용한 슬라이드 콘텐츠 구현하기

• 이미지 5장을 사용하여 '좌/우'버튼 클릭 시 이미지와 페이지 번호가 변경되도록 하기

• article 박스 안에 이미지 태그와 아이콘, 페이지 번호를 표시하도록 한다.

• 좌/우 버튼 클릭 시 각각 해당하는 함수를 만들어서 페이지 번호가 증가/감소하도록 한다. 버튼 클릭시 이미지 src 속성 값을 변경하여 이미지가 변경되도록 함

귀여워 강아지

🠔 🠖

강쥐1


좋아하니까 전부 귀여운 거야.!

예전부터도 꽤 귀엽다고는 생각했지만...
최근에는 정말...
말도 안되게 귀여운 거 아닌가라는 생각이 든다.

         //1. 변수생성
        let n = 1;
        const l_btn =  document.getElementById('left_btn');
        const r_btn = document.getElementById('right_btn');
    
        //2. 페이지 번호 변수 선언
        let page_n = document.getElementById('page');
        
        //3. 페이지 번호 출력
        page_n.innerHTML = n + ' / 5';
    
        //4. 왼쪽 버튼 클릭 이벤트
        l_btn.addEventListener('click', function(){
          // window.alert('오른쪽버튼 클릭');
          if(n==1){
            n=5;
          }else{
            n--;
          }
          page_n.innerHTML = n + ' / 5';
          document.getElementById('dog').src='./images/dog'+n+'.jpg';
        });
    
        //5. 오른쪽 버튼 클릭 이벤트
        r_btn.addEventListener('click', function(){
          // window.alert('오른쪽버튼 클릭');
          if(n==5){
            n=1;
          }else{
            n++;
          }
          page_n.innerHTML = n + ' / 5';
          document.getElementById('dog').src='./images/dog'+n+'.jpg';
        });