자바 스크립트 이미지 슬라이드쇼 구현해보기

javascript 코드

const myImg = ["my1.jpg","my2.jpg","my3.jpg","my4.jpg","my5.jpg","my6.jpg","my7.jpg","my8.jpg","my9.jpg","my10.jpg"];
const imgPlace = document.querySelector(".my-img") // html에서 이미지 넣을 위치 가져오기 
let currentIndex = 0; //접근할 인덱스 번호 (이 값을 함수안에다 넣으면 실행될때마다 0으로 초기화 되므로 밖으로 뺀다.)

function imgPick(){
    if(currentIndex<myImg.length-1){ 
    imgPlace.src = `images/my/${myImg[currentIndex]}`;
    currentIndex++;
    }else{
        imgPlace.src = `images/my/${myImg[currentIndex]}`;
        currentIndex = 0;   
    }
}
imgPick(); //처음에 먼저 한번 실행하고
setInterval(imgPick,3500); // 3.5초마다 반복실행

_위코드는 접근할 인덱스 번호를 전역변수로 선언하였다.
접근할 인덱스 번호는 일단 imgPick 함수내에서만 사용할 함수이다.
전역변수로 선언했으니 다른 함수를 추가했을 때 실수로 이에 접근할 수가 있는데
이를 방지하기위해 클로저 표현을 사용하였다.

클로저

const myImg = ["my1.jpg","my2.jpg","my3.jpg","my4.jpg","my5.jpg","my6.jpg","my7.jpg","my8.jpg","my9.jpg","my10.jpg"];
const imgPlace = document.querySelector(".my-img")

//클로저
function makeCounter(){
    let currentIndex = 0;

    return function () {
        if(currentIndex == myImg.length-1){
           return currentIndex = 0;
       }
        return ++currentIndex;
       
    };
    
}
let counterIndex = makeCounter();

function imgPick(){    
    imgPlace.src = `images/my/${myImg[counterIndex()]}`;
}
imgPick();
setInterval(imgPick,3500);

이렇게 쓰면 전역에 선언할 때 불가피한 다른 코드의 접근을 피할수 있다.