定時器上的按鈕圖像更改

在我的項目中，我有一個頁面，其中包含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); 
}

來源

2011-03-18 Henry

什麼樣的「不能工作」？你得到任何JavaScript錯誤？ – drudge 2011-03-18 20:21:01

一兩件事，是不正確的肯定

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

應該

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

來源

2011-03-18 20:40:40

Greaattttttttt !!!它的工作正是我想要的。謝謝你的解決方案，上帝保佑你。 – Henry 2011-03-18 21:17:36

我沒有測試此代碼，但類似這應該工作：

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'）是無論選擇器如何工作以抓取圖像按鈕。

來源

2011-03-18 20:43:08

定時器上的按鈕圖像更改

回答

相關問題