Jquery 예제 setinterval 자동 슬라이드

 

 

 

메인 배너 이미지 3장을 자동 슬라이드

 

<ul>
  <li><img src="./img/banner1"></li>
  <li><img src="./img/banner2"></li>
  <li><img src="./img/banner3"></li>
</ul>

 

-ul 내부에 이미지 요소 3장을 나란히 배치해 둔 상태

 

setinterval(function(){함수실행문},시간)
=> 자동으로 함수를 반복 실행

 

setinterval(function(){
  const left1 = $('ul').css('left')
  // 슬라이드 하려는 요소의 left 값을 저장
  
  if( parseInt(left1) == -1672 ) {
  // 슬라이드 요소의 left값을 정수로 변환 후 슬라이드 3개 요소를 합친 크기와 비교
  
  $('ul').animate({left:0},'slow')
  // 슬라이드가 3장이 지나가면 left값을 0으로 주어 처음 상태로 되돌림
  
  } else {
    $('ul').animate({
      left: '-=836px'
    },'slow')
    => left값을 마이너스값으로 요소 한장 크기만큼씩 밀어내기
  }
}, 3000)