[JS] 이미지 자동 슬라이드 만들기

쇼핑몰 마크업을 하다가 이미지 자동 슬라이드 기능 구현을 만들어 보자 하여 만든 코드

 

문제는 실제 코드에 적용 시 자바스크립트 링크를 body 맨 아래에 넣어

페이지 첫 로딩 할 때 부자연스러운 게 있는데 조금 더 공부하여 재업로드 해야할 거 같다.

 

 

HTML

<div class="container-box">
    <div class="container">
        <img src="../assets/images/model1.jpeg" alt="" class="img">
        <img src="../assets/images/model2.jpeg" alt="" class="img">
        <img src="../assets/images/model3.jpeg" alt="" class="img">
        <img src="../assets/images/model4.jpeg" alt="" class="img">
        <img src="../assets/images/model1.jpeg" alt="" class="img">
    </div>
</div>

CSS

.container-box{
  overflow: hidden;
  position: relative;
  width: 300px;
  height: 300px;
}
.container{
  width: 100%; height: 100%;
  position:absolute;
}
.container img{
  display: block;
  position: absolute;
  width: 100%;
}

JS

window.onload = function(){

  const $conBox = document.querySelector('.container-box'),
  $container = document.querySelector('.container'),
  $imgs = document.querySelectorAll('img'),
  imgs_c=$imgs.length;
  
  for(i=0; i < imgs_c; i++){   
      $imgs[i].style.left = `${i*100}%`; //img 다 불러오기 
  }


  function auto_slide(){
    let photo_c = 0;
    let i = 0;
    setInterval(function(){ //2초마다 실행
        photo_c += 100;
        $container.style.transition ='.5s' //0.5초 동안 모션
        $container.style.left ="-" + photo_c +"%";    // 100퍼씩 더해주며 다음 사진으로 이동
        i++;
        
        if(i === imgs_c-1){      // 마지막 사진
            setTimeout(function(){ // 0.5초뒤에 실행
                $container.style.transition ='0s' // 처음으로 돌아갈 때 모션 방지
                photo_c = 0;              
                $container.style.left ="-" + photo_c +"%"; // 0퍼로 이동
            },500)
            i = 0;
        }
    }, 2000)
  }
  auto_slide();
}