슬라이드 이펙트

소스 보기

Javascript

jquery

window.onload = function(){
    let currentIndex = 0;                                    //현재 이미지
    const slider = document.querySelectorAll(".slider");     //모든 이미지를 변수에 저장
    
    // 이미지를 변경
    setInterval(() => {
        let nextIndex = (currentIndex + 1) % slider.length    // 0 1 2 3 4 0 1 2 3 4

        slider[currentIndex].style.opacity = "0";            //첫번째 이미지가 사라짐
        slider[nextIndex].style.opacity = "1";               //두번째 이미지가 나타남
        slider.forEach(img => img.style.transition = "all 1s");  //이미지 애니메이션 추가

        currentIndex = nextIndex;               //두번째 인덱스 값을 현 인덱스 값에 저장
       }, 3000);   //3초에 한번씩 
};

$(function(){
    let currentIndex = 0;       //현재 이미지

    setInterval(function(){     //3초에 한번씩 실행
        let nextIndex = (currentIndex + 1) % 5;

        $(".slider").eq(currentIndex).fadeOut(1200);    //첫번째 이미지 사라짐
        $(".slider").eq(nextIndex).fadeIn(1200);        //두번째 이미지 나타남

        currentIndex = nextIndex;
    }, 3000);
});