javascript setInterval 함수가 작동하지 않습니다.

Question

나는 slideShow를 만들고 새로운 인수로 함수를 다시 시도해야하지만, setInterval() 함수를 사용하려고하면 함수가 한 번 실행됩니다. 왜 진짜야?

var sIndex = 0; 
var slide = document.getElementsByClassName('slide'); 

function slider(n) { 
    if (sIndex + n >= 0 && sIndex + n <= slide.length - 1) { 
    slide[sIndex].style.display = "none"; 
    sIndex += n; 
    slide[sIndex].style.display = "block"; 
    } else if (sIndex + n < 0) { 
    slide[sIndex].style.display = "none"; 
    sIndex = slide.length - 1; 
    slide[sIndex].style.display = "block"; 

    } else if (sIndex + n > slide.length - 1) { 
    slide[sIndex].style.display = "none"; 
    sIndex = 0; 
    slide[sIndex].style.display = "block"; 
    } 
} 
setInterval(function() { 
    slider(sIndex); 
}, 2000); 

Answer 1

sIndex 항상 0을 유지합니다.

var sIndex = 0; 
 
var slide = document.getElementsByClassName('slide'); 
 

 
function slider(n) { 
 
    // first run: n=0 plus sIndex=0, leads to sIndex stays 0 every loop 
 
    if (sIndex + n >= 0 && sIndex + n <= slide.length - 1) { 
 
    slide[sIndex].style.display = "none"; 
 
    sIndex += n; 
 
    slide[sIndex].style.display = "block"; 
 
    } else if (sIndex + n < 0) { 
 
    slide[sIndex].style.display = "none"; 
 
    sIndex = slide.length - 1; 
 
    slide[sIndex].style.display = "block"; 
 

 
    } else if (sIndex + n > slide.length - 1) { 
 
    slide[sIndex].style.display = "none"; 
 
    sIndex = 0; 
 
    slide[sIndex].style.display = "block"; 
 
    } 
 
    console.log(new Date(), sIndex) 
 
} 
 
setInterval(function() { 
 
    slider(sIndex); 
 
}, 2000);

<div class="slide"></div>

편집 : 내 대답은 이유,하지만 솔루션을 제공합니다. @Satpal의 코드는 다음 중 하나를 제공합니다 : n을 제거하고 대신 1을 더합니다.

Answer 2

당신은 변수 n이을 제거 할 필요가 없습니다.

var sIndex = 0; 
var slide = document.getElementsByClassName('slide'); 

function slider() { 
    if (sIndex >= 0 && sIndex<= slide.length - 1) { 
    slide[sIndex].style.display = "none"; 
    sIndex += 1; 
    slide[sIndex].style.display = "block"; 
    } else if (sIndex < 0) { 
    slide[sIndex].style.display = "none"; 
    sIndex = slide.length - 1; 
    slide[sIndex].style.display = "block"; 
    } else if (sIndex > slide.length - 1) { 
    slide[sIndex].style.display = "none"; 
    sIndex = 0; 
    slide[sIndex].style.display = "block"; 
    } 
} 
setInterval(slider, 2000);