- 위의 페이지처럼 시간이 지나면 사진이 바뀌는 스크립트입니다.
- javascript, jquery, GSAP 세 가지 방식으로 나타내 보았습니다.
- 스크립트 코드를 같이 보시죠
Javascript
<script>
// 선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");
const slider = sliderWrap.querySelectorAll(".slider");
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 이미지 갯수
let sliderInterval = 3000; //이미지 변경 시간
setInterval(() => {
let nextIndex = (currentIndex + 1) % sliderCount ;
slider[currentIndex].style.opacity="0";
slider[nextIndex].style.opacity="1";
currentIndex = nextIndex;
},sliderInterval);
</script>- 먼저 javascript입니다.
- setInterval 함수는 정해진 시간마다 함수를 실행시키는 방법입니다. sliderInterval 변수에 3000이라는 값을 주고 3초마다 함수가 실행되어 다음 이미지가 보이도록 합니다.
- let nextIndex = (currentIndex + 1) % sliderCount;으로 다음 이미지의 인덱스 값을 구해서, 투명도를 설정하는 opacity 를 이용해서 slider[currentIndex] (현재 보이는 이미지)를 투명도를 0으로 만들어서 안 보이게 합니다.
- 그리고 slider[nextIndex].style.opacity = "1";으로 다음 이미지를 투명도를 1로 만들어서 보이도록 합니다.
- 마지막으로 currentIndex = nextIndex;으로 현재 보이는 이미지의 인덱스 값을 갱신합니다.
- 콘솔창에 console.log(currentIndex);을 출력해서 현재 보이는 이미지의 인덱스 값을 확인할 수 있습니다.
jQuery
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
// 선택자
const sliderWrap = $(".slider__wrap");
const slider = sliderWrap.find(".slider");
setInterval(() => {
let nextIndex = (currentIndex + 1) % sliderCount;
slider.eq(currentIndex).fadeOut(0);
slider.eq(nextIndex).fadeIn(1);
currentIndex = nextIndex;
}, sliderInterval);
</script>- 다음은 jQuery 입니다. 기본적인 틀은 비슷합니다. 표현하는 방식이 다를 뿐이죠
- setInterval 함수를 이용해서 일정한 시간 간격으로 이미지가 변경됩니다.
- sliderInterval 변수에는 이미지가 변경될 시간 간격 3000(3초)이 저장되어 있습니다.
- let nextIndex = (currentIndex + 1) % sliderCount;으로 다음 이미지의 인덱스 값을 계산합니다.
- jQuery에서는 요소를 선택할 때 document.querySelector를 사용하지 안고 $를 사용해서 더욱 편리합니다.
- setInterval 함수 안에 slider.eq(currentIndex).fadeOut(0); slider.eq(nextIndex).fadeIn(1);로 애니메이션을 실행 시켜주면 됩니다.
- 첫 번째 인자로는 애니메이션 대상 요소를 선택하고, 두 번째 인자로는 애니메이션 속성을 설정합니다.
- 마지막으로 currentIndex = nextIndex;로 현재 이미지의 인덱스 값을 갱신합니다.
GSAP
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
setInterval(() => {
let nextIndex = (currentIndex + 1) % sliderCount;
gsap.to(slider[currentIndex], { opacity: 0 });
gsap.to(slider[nextIndex], { opacity: 1 });
currentIndex = nextIndex;
}, sliderInterval);
</script>- setInterval 함수를 이용해서 일정한 시간 간격으로 이미지가 변경됩니다.
- sliderInterval 변수에는 이번에도 이미지가 변경될 시간 간격이 저장되어 있습니다.
- let nextIndex = (currentIndex + 1) % sliderCount;으로 다음 이미지의 인덱스 값을 계산합니다.
- gsap.to(slider[currentIndex], { opacity: 0 });과 gsap.to(slider[nextIndex], { opacity: 1 }); 은 GSAP의 to() 메소드를 이용해서 슬라이더 이미지의 투명도를 조절합니다.
- 첫 번째 인자로는 애니메이션 대상 요소를 선택하고, 두 번째 인자로는 애니메이션 속성을 설정합니다.
- opacity는 투명도를 나타내는 속성입니다.
- 마지막으로 currentIndex = nextIndex;로 현재 이미지의 인덱스 값을 갱신합니다.
- 끝!