자바스크립트(Javascript) 슬라이드쇼 기능 만들어보기

우선 역시 실행영상~

https://www.w3schools.com
에서 찾아보면 코드가 있는데 가져와서 조금만 바꿨다.

전체코드는 아래 깃헙링크에 있음,, 전체 프로젝트중 일부분만 따온거라 찾기 힘들수도 있지만 일단 첨부,,
https://github.com/leehyolim/Balpoom
html, css까지 올리면 너무 지저분해 질것 같아서 생략하고 자바스크립트 코드만
setTimeout을 이용해서  2초마다 함수를 호출해서 사진을 바꿔주게끔 설정을 했다.
dot이라는 클래스를 가진 태그들이 아래 점들이다. active에는 배경색을 바꿔주는
css가 있다.
4개의 사진 전부 display:none;에서 보여줄 사진만 2초마다 block으로 바꿔주는 방법.



var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("slides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}   
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}