티스토리 뷰
https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect02.html
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img"); //sliderImg에 클래스 slider__img(이미지 보이는 영역) 저장
const sliderInner = document.querySelector(".slider__inner"); //sliderInner에 클래스 slider__inner(이미지 움직이는 영역) 저장
const slider = document.querySelectorAll(".slider"); //slider에 클래스 slider(5개의 이미지) 저장
let currentIndex = -1; //첫 번째 이미지(현재 보이는 이미지)
let sliderCount = slider.length; //sliderCount에 전체 이미지 갯수 저장
setInterval(() => { //setInterval(반복 실핼)사용
(currentIndex < sliderCount-1) ? currentIndex++ : currentIndex = 0; //삼항 연산자 사용
//currentIndex가 sliderCount-1보다 작으면 currentIndex를 1씩 증가시키고 그렇지 않으면 0으로 만듦
sliderInner.style.left = `${-800*currentIndex}px` //sliderInner의 스타일에 left `${-800*currentIndex}px` 추가
sliderInner.style.transition = "all 0.6s ease" //sliderInner의 스타일에 transition "all 0.6s ease" 추가
})
}, 2000) //2초에 한번씩 실행
'Script Sample > Slider Effect' 카테고리의 다른 글
sliderEffect06 - 닷 버튼 추가 (0) | 2022.02.17 |
---|---|
sliderEffect05 - 버튼 추가 (0) | 2022.02.17 |
sliderEffect04 - 위로 움직이기 (0) | 2022.02.17 |
sliderEffect03 - 연속적으로 움직이기 (0) | 2022.02.16 |
sliderEffect01 - 페이드 효과 (0) | 2022.02.15 |
댓글
© 2018 webstoryboy