Jquery 예제 prev / next 버튼을 이용한 슬라이드

 

메인 배너 이미지 3장을 버튼을 이용하여 슬라이드 시키고

해당 이미지의 인디케이터가 활성화 되도록 만들기

 

 

기본 구조

=> 메인 배너 영역
<div id='main'>
  <ul>
    <li><img src="./img/banner1.jpg"></li>
    <li><img src="./img/banner2.jpg"></li>
    <li><img src="./img/banner3.jpg"></li>
  </ul>

=> prev next 버튼 이미지
  <img class="prev" src="./img/prev.png">
  <img class="next" src="./img/next.png">
</div>

=> 인디케이터 영역
<div id="roll">
  <img src="./img/over.png"> => 활성화 이미지
  <img src="./img/out.png"> => 비활성화 이미지
  <img src="./img/out.png">
</div>

 

 

let bunNum = 0

$('.next').click(function(){
  if(bunNum >= 3) { return false }
  bunNum ++
  // next 버튼을 클릭했을때 만약 bunNum의 값이 3보다 크거나 같다면 아무것도 실행 하지 않음.
  // 아니라면 bunNum의 값을 하나씩 더해줄것이다.
  
  main_w = $('#main').width()
  
  $('#main ul').animate({
    left: -main_w * bunNum
    // lefe값을 -가로값과 bunNum값을 곱해 왼쪽으로 밀리는듯한 효과를 줌 
  }, 500, function(){
    $('#roll img').attr('src','./img/out.png')
    $('#roll img').eq(bunNum).attr('src','over.png')
    // 슬라이드 효과와 동시에 인디케이터 이미지의 eq()값을 bunNum을 대입하여
    // 해당 이미지와 같은 위치의 인디케이터만 활성화 이미지로 변경
  })
})

// 만약 처음 next 버튼을 한번 누르면 bunNum의 값은 1이 되고 메인의 -가로값 * 1을 left값에 넣어
// 요소가 왼쪽으로 당겨지면서 다음 슬라이드 요소가 보이게 된다.
// 그리고 인디케이터 이미지의 eq(1)번 요소가 활성화 상태가 된다.

$('.prev').click(function(){
  if(bunNum <= 0) { return false }
  bunNum --
  // prev 버튼을 클릭했을때 만약 bunNum의 값이 0보다 작거나 같다면 아무것도 실행 하지 않음.
  // 아니라면 bunNum의 값을 하나씩 빼줄것이다.
  
  main_w = $('#main').width()
  
  $('#main ul').animate({
    left: -main_w * bunNum
    // lefe값을 -가로값과 bunNum값을 곱해 오른쪽으로 밀리는듯한 효과를 줌 
  }, 500, function(){
    $('#roll img').attr('src','./img/out.png')
    $('#roll img').eq(bunNum).attr('src','over.png')
    // 슬라이드 효과와 동시에 인디케이터 이미지의 eq()값을 bunNum을 대입하여
    // 해당 이미지와 같은 위치의 인디케이터만 활성화 이미지로 변경
  })
})