슬라이드 이펙트

소스 보기

Javascript

jquery

CSS

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

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

        currentIndex = nextIndex;
    },3000);

});

css