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

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'）当然是任何选择器都可以抓取你的图像按钮。

计时器上的按钮图像更改

2 个答案: