sliderEffect01 - 페이드 효과 주기

HTML 구성

<div class="slider__wrap">
    <div class="slider__img">
        <div class="slider"><img src="img/images01.jpg" alt="이미지1"></div>
        <div class="slider"><img src="img/images02.jpg" alt="이미지2"></div>
        <div class="slider"><img src="img/images03.jpg" alt="이미지3"></div>
        <div class="slider"><img src="img/images04.jpg" alt="이미지4"></div>
        <div class="slider"><img src="img/images05.jpg" alt="이미지5"></div>
    </div>
</div>

 

JS 구성

<script>
    //slider01
    const sliderWrap = document.querySelector(".slider__wrap"); //sliderWrap 선언
    const sliderImg = document.querySelector(".slider__img"); //sliderImg 선언
    const slider = document.querySelectorAll(".slider"); //slider 선언

    let currentIndex = 0; //현재 보이는 이미지
    let sliderCount = slider.length //이미지 갯수

    setInterval(() => {     //일정한 시간간격으로 작업을 실행
        let nextIndex = (currentIndex + 1) % 5;     //5로 나눈 나머지 값을 한다

        slider[currentIndex].style.opacity = "0" //첫 번째 이미지를 안보이게
        slider[nextIndex].style.opacity = "1" //두 번째 이미지를 안보이게

        slider.forEach(slider => { //slider 각각을 선택해서
            slider.style.transition = "all 0.7s" //애니메이션을 속도를 조절하여 자연스럽게!
        })

        currentIndex = nextIndex; // currentIndex값을 nextIndex 값과 같이 한다
    },2000); //2초간격으로한다 (setInterval을 썼으니, 계속 반복한다)
</script>

 

 

링크 https://sungilryuu.github.io/webs_class/javascript/effect/sliderEffect01.html