728x90
슬라이드 이펙트 - 트랜지션 효과
다섯 장의 이미지를 3초에 한 장씩 넘어가는 효과를 만들어 보았습니다. 마지막 다섯 번째 이미지가 되었을 때 멈추는 것이 아니라 첫 번째 이미지로 넘어갑니다. 사이트의 우측 하단에 소스 보기를 누르면 html, css, javascript 소스를 모두 확인할 수 있습니다. 여기서는 javascript에 대해 자세히 알아보겠습니다.
자바스크립트
슬라이드 효과를 위한 자바스크립트 작성법입니다. 슬라이드 효과를 위해 setInterval 함수를 사용합니다. setInterval은 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용합니다. 첫 번째 이미지를 안보이게 하고 두 번째 이미지를 보이게 하기 위해 opacity 속성을 사용합니다.
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); //구체적인 위치값을 주기 위해 document 대신 sliderWrap 사용
const slider = sliderWrap.querySelectorAll(".slider");
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //이미지 갯수
setInterval(() => {
let nextIndex = (currentIndex + 1) % sliderCount; //다음 이미지
//1 % 5 = 1, 2, 3, 4, 0, 1, 2, 3, 4, 0 ... //나머지 값 이용해서 처음 이미지로 넘어오게
slider[currentIndex].style.opacity = "0"; //첫 번째 이미지를 안보이게
slider[nextIndex].style.opacity = "1"; //두 번째 이미지를 보이게
currentIndex = nextIndex;
console.log(currentIndex)
}, 3000); //1000은 1초
728x90
반응형
'JAVASCRIPT Effect' 카테고리의 다른 글
| SLIDER Effect 03 (1) | 2022.09.02 |
|---|---|
| SLIDER Effect 02 (3) | 2022.08.29 |
| QUIZ Effect 06 (5) | 2022.08.24 |
| SEARCH Effect 03 (3) | 2022.08.22 |
| QUIZ Effect 05 (2) | 2022.08.18 |
댓글