타이머의 버튼 이미지 변경

Question

내 프로젝트에는 수평으로 놓이는 5 개의 이미지 버튼이 포함 된 페이지가 있습니다. 페이지로드시 Button1의 이미지가 변경되어야합니다 (나머지 4 개의 버튼은 동일하게 유지됩니다). 3 초 후 Button1이 원래 이미지로 돌아가고 Button2의 이미지가 변경됩니다. 3 초 후 Button2가 원래 이미지로 돌아가고 Button3의 이미지가 변경됩니다. 등등 .. 하지만 Button5가 완료되면 다시 Button1 이미지로 돌아옵니다. 이 작업은 연속 루프에서 계속해야합니다. 여기 내 code.But 작동하지 않는 이유는 모르겠지만 작동하지 않습니다. 도움이 될 것입니다. 여기

내 코드

$(document).ready(function(){ 
    BeginRotation(); 
}); 

function BeginRotation() { 
    rotateButton(0); 
} 

function rotateButton(buttonIndex) { 
    var previousIndex = (buttonIndex + 4) % 5; 

    var previousCurrentClass = 'main-nav-button' + (previousIndex + 1) + '-on'; 
    var previousNewClass = 'main-nav-button' + (previousIndex + 1); 
    var currentClass = 'main-nav-button' + (buttonIndex + 1); 
    var newClass = 'main-nav-button' + (buttonIndex + 1) + '-on'; 

    // alert('Previous Current Class: ' + previousCurrentClass + '\nPrevious New Class: ' + previousNewClass + '\nCurrent Class: ' + currentClass + '\nNew Class: ' + newClass); 

    $('.' + currentClass).removeClass(currentClass).addClass(newClass); 
    $('.' + previousCurrentClass).removeClass(previousCurrentClass).addClass(previousNewClass); 
    window.setTimeout(rotateButton((buttonIndex + 1) % 5), 3000); 
} 

Answer 1

하나 개 확인

window.setTimeout(rotateButton((buttonIndex + 1) % 5), 3000); 

에 대한 잘못된 것은 그것은

window.setTimeout("rotateButton(" + ((buttonIndex + 1) % 5) + ")", 3000); 

Answer 2

나는이 코드를 테스트하지 않았다해야하지만, 뭔가 같은 것입니다 이게 작동해야합니다 :

jQuery(function($){ 
    var $btns = $('a.btn'); 
    var index = 0; 

    setInterval(function() { 
     $btns.removeClass('rotateThis'); 
     $btns[index].addClass('rotateThis'); 
     index = (index + 1 >= $btns.size()) ? 0 : index + 1; 
    }, 3000); 
}); 

$ ('a.btn')은 물론 이미지 버튼을 잡는 선택기입니다.