아이티에듀넷

2024-08-26 :: 024 Java Script 활용 ③

YEOM-JI 2024. 8. 26. 12:40

 

 

이미지 주소로만 변경했던 야매(?)슬라이드를 좀 더 부드러운 동작이 담긴 버전으로 구현해보자.

 


let leftB = document.querySelector('#left')
let rightB = document.querySelector('#right')
leftB.addEventListener("click", leftSlide)
rightB.addEventListener("click", rightSlide)

let sliderLi = document.querySelectorAll('.slider_li')
let count = 0;

function leftSlide(){
  count--;
  //왼쪽 버튼을 누를 때마다 count 변수에 담긴 값에서 -1
  if(count < 0){
    count = (sliderLi.length-1);
    //count가 0보다 작은 숫자가 되면 sliderLi의 마지막 인덱스 번호가 들어가게끔 if문 설정
  }
  show() //아래에 작성한 기능, 화면을 넘겨주는 이벤트  
}

function rightSlide(){
  count++;
  //오른쪽 버튼을 누를 때마다 count 변수에 담긴 값에서 +1
  if(count >= sliderLi.length){
    count = 0;
    //count가 sliderLi 배열의 길이보다 크거나 같은 숫자가 되면 count값을 초기로 되돌려 놓음
  }
  show()
}

function show(){
  sliderLi.forEach(function(array){
    array.style.transform = `translateX(-${count*100}%)`
    //for문 혹은 forEach로 배열의 각 요소에게 원하는 CSS속성을 입력함
  })
}

 

 

   이번에는 슬라이드에 이어 탭 형식도 js로 작성해보자. input태그를 통한 radio 방식으로는 그렇게 어렵지 않았는데 js는 HTML에서 읽어온 뒤, 기능을 만들어 적용해야 한다는 점이 아직은 익숙하지 않은 것 같아 상세하게 남겨보도록 하겠다.

 


<section>

    <ul id="tap_list"> //상단의 탭이 될 부분
      <li class="fashion_tab" id="ftap1">Best Sellers</li>
      <li class="fashion_tab" id="ftap2">New Arrivals</li>
      <li class="fashion_tab" id="ftap3">Hot sales</li>
    </ul>
    <div id="pro_list"> //하단의 컨텐츠가 나타나는 부분
      <div class="pro_box1 pro_box2" id="pro1"> ... </div>
      <div class="pro_box1 pro_box3" id="pro2"> ... </div>
      <div class="pro_box1 pro_box2" id="pro3"> ... </div>
      <div class="pro_box1 pro_box3" id="pro4"> ... </div>
      <div class="pro_box1 pro_box2" id="pro5"> ... </div>
      <div class="pro_box1 pro_box3" id="pro6"> ... </div>
      <div class="pro_box1 pro_box2" id="pro7"> ... </div>
      <div class="pro_box1 pro_box3" id="pro8"> ... </div> //최대한 숫자를 활용하는 편이 편하다.
    </div>

  </section>

 


let tabBtu = document.querySelectorAll('.fashion_tap')
//탭 버튼이 될 li들을 불러와서 변수에 담는다.

consol.log 확인 결과
NodeList(3) [li#ftap1.fashion_tap, li#ftap2.fashion_tap, li#ftap3.fashion_tap]
0: li#ftap1.fashion_tap
1: li#ftap2.fashion_tap.active
2: li#ftap3.fashion_tap


for(let i=0; i<tabBtu.length; i++){
  tabBtu[i].addEventListener('click', tabSelected)
}
//배열의 각 요소에 반복문을 활용하여 각 인덱스에 이벤트를 할당해준다.


function tabSelected(){
  let tabID = 'pro_box' + this.id.charAt(this.id.length-1)
  //ftap(숫자) 부분에서 마지막 숫자 부분만 들고와 테이블의 id와 똑같이 만들기

  console.log 확인 결과 //각 탭을 누를 때마다 반환되는 값이다.
  pro_box1
  pro_box2
  pro_box3

  tabActive(this) //클릭한 값을 가져와서 tap 매개변수에 삽입하여 작동하게 만듦.
  showTable(tabID) //지역변수로 선언된 tabID를 해당 기능의 매개변수에 삽입
}


function tabActive(tab){
  for(let i=0; i<tabBtu.length; i++){
    tabBtu[i].className = "fashion_tab";
    //다시 원래 값으로 돌려놓는 반복문
    //아래에서 active 값을 준 것을 다시 초기화 하기 위해서 필요하다.
    //먼저 선언된 기능이기 때문에 초기화가 먼저 돈 이후 active 추가하는 기능이 작동된다.
  }

  tab.className = "fashion_tab active"
  //active를 추가해 css속성을 주기 위함
  //해당 기능에서는 this로 값을 가져옴
}


function showTable(tabID){
  let proBox = document.querySelectorAll('.pro_box1')
  //탭이 변경 될 때마다 제품들이 나타났다 사라졌다 하기 위해 공통된 클래스 값을 가져와 변수에 저장

  for(let i=0; i<proBox.length; i++){
    proBox[i].style.display = "none"
  }

  let proTable = document.querySelectorAll("."+tabID)
  //단일이 아닌 여러개에 스타일을 줘야 하기 때문에 위와 마찬가지로 반복문을 통해 각 배열에 값을 지정해줘야한다.
  if(proTable){
    proTable.forEach(function(array){
      array.style.display = "block"
    })
   //선택된 클래스만 보이도록 none/block값을 지정하면 끝
  }
}


tabActive(tabBtu[0])
showTable('pro_box1')
//첫 화면에도 탭이 보일 수 있도록 초기값을 지정

 

   위 기능을 코드펜으로 작성하면 이렇게 된다.

 

See the Pen Untitled by IT배움터 (@gfifvcbf-the-typescripter) on CodePen.

 

   어려운 듯 알 듯 말 듯... 아직은 낯설지만 친해질 수 있기를...