티스토리 뷰
https://garenchoi.github.io/webs_class/javascript/effect/sliderEffect01.html
const sliderWrap = document.querySelector(".slider__wrap"); //변수 sliderWrap에 클래스 slider__wrap 저장
const sliderImg = document.querySelector(".slider__img"); //변수 sliderImg에 클래스 slider__img 저장
const slider = document.querySelectorAll(".slider"); //변수 slider에 클래스 slider 저장
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //sliderCount에 전체 이미지 갯수 저장
setInterval(() => { //setInterval(반복 실행) 사용
let nextIndex = (currentIndex + 1) % 5; //nextIndex = currentIndex에 1을 더하고 5로 나눈 값의 나머지 값 저장
slider[currentIndex].style.opacity = "0" //currentIndex번째 이미지를 안보이게
slider[nextIndex].style.opacity = "1" //nextIndex번째 이미지를 보이게
slider.forEach(el => { //slider의 element를 선택해 el로 저장
el.style.transition = "all 0.3s"; //el의 style에 transition = "all 0.3s" 추가
})
currentIndex = nextIndex; //currentIndex값을 nextIndex 값으로 변경
}, 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 |
sliderEffect02 - 좌로 움직이기 (0) | 2022.02.16 |
댓글
© 2018 webstoryboy