슬라이드 이펙트

소스 보기

Javascript

jquery


window.onload = function () {
    let currentIndex = 0;       //현재 이미지
    const slider = document.querySelectorAll(".slider");    //모든 이미지를 변수에 저장          
    
    
    setInterval(() => {         // 3초에 한번씩 이미지를 변경
        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);
    }


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

        setInterval(function() {    //3ch에 한번 실행
            let nextIndex = (currentIndex + 1) % 5;
            
            $(".slider").eq(currentIndex).fadeOut(1200);    //첫번쨰 이미지 사라짐
            $(".slider").eq(nextIndex).fadeIn(1200);        // 두번쨰 이미지 나타남

            currentIndex = nextIndex

        }, 3000);
    });