javascript - 计时器上的按钮图像更改

Question

在我的元素中，我有一个页面，其中包含 5 个水平放置的图像按钮。当页面加载时，Button1 上的图像应该改变(其余 4 个按钮保持不变)。3 秒后 Button1 恢复到其原始图像，Button2 上的图像将发生变化。3 秒后，Button2 恢复到其原始图像，而 Button3 上的图像将发生变化。等等..但是 Button5 完成后，应该会再次回到 Button1 图像。这应该在一个连续的循环中进行。这是我的代码。但它不起作用我不知道它不起作用的原因。任何帮助将不胜感激。

这是我的代码

$(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);