自動功能腳本

我有4個按鈕和相對格的功能。基本上，當我們點擊按鈕時，它應該隱藏一些div並顯示一個div。它應該改變該按鈕的背景，「懸停鼠標」在按鈕上應該改變按鈕的屬性。自動功能腳本

現在我想使它自動化，這意味着它應該自動執行點擊事件一個接一個。我嘗試了許多事情，但都沒有成功。我的功能如下：

function Fun1() { 
    $("#BtnItem1").addClass("ButtonsSliderHover1"); 
    $("#BtnItem2").addClass("ButtonsSliderNormal"); 
    $("#BtnItem3").addClass("ButtonsSliderNormal"); 
    $("#BtnItem4").addClass("ButtonsSliderNormal"); 

    $("#BtnItem2").removeClass("ButtonsSliderHover1"); 
    $("#BtnItem3").removeClass("ButtonsSliderHover1"); 
    $("#BtnItem4").removeClass("ButtonsSliderHover1"); 

    $("#Item1").css('display', 'block'); 
    $("#Item2").css('display', 'none'); 
    $("#Item3").css('display', 'none'); 
    $("#Item4").css('display', 'none'); 

} 
function Fun2() { 
    $("#BtnItem1").addClass("ButtonsSliderNormal"); 
    $("#BtnItem2").addClass("ButtonsSliderHover1"); 
    $("#BtnItem3").addClass("ButtonsSliderNormal"); 
    $("#BtnItem4").addClass("ButtonsSliderNormal"); 

    $("#BtnItem1").removeClass("ButtonsSliderHover"); 
    $("#BtnItem1").removeClass("ButtonsSliderHover1"); 
    $("#BtnItem3").removeClass("ButtonsSliderHover1"); 
    $("#BtnItem4").removeClass("ButtonsSliderHover1"); 

    $("#Item1").css('display', 'none'); 
    $("#Item2").css('display', 'block'); 
    $("#Item3").css('display', 'none'); 
    $("#Item4").css('display', 'none'); 
} 
function Fun3() { 
    $("#BtnItem1").addClass("ButtonsSliderNormal"); 
    $("#BtnItem2").addClass("ButtonsSliderNormal"); 
    $("#BtnItem3").addClass("ButtonsSliderHover1"); 
    $("#BtnItem4").addClass("ButtonsSliderNormal"); 

    $("#BtnItem1").removeClass("ButtonsSliderHover"); 
    $("#BtnItem1").removeClass("ButtonsSliderHover1"); 
    $("#BtnItem2").removeClass("ButtonsSliderHover1"); 
    $("#BtnItem4").removeClass("ButtonsSliderHover1"); 

    $("#Item1").css('display', 'none'); 
    $("#Item2").css('display', 'none'); 
    $("#Item3").css('display', 'block'); 
    $("#Item4").css('display', 'none'); 
} 
function Fun4() { 
    $("#BtnItem1").addClass("ButtonsSliderNormal"); 
    $("#BtnItem2").addClass("ButtonsSliderNormal"); 
    $("#BtnItem3").addClass("ButtonsSliderNormal"); 
    $("#BtnItem4").addClass("ButtonsSliderHover1"); 

    $("#BtnItem1").removeClass("ButtonsSliderHover"); 
    $("#BtnItem1").removeClass("ButtonsSliderHover1"); 
    $("#BtnItem2").removeClass("ButtonsSliderHover1"); 
    $("#BtnItem3").removeClass("ButtonsSliderHover1"); 

    $("#Item1").css('display', 'none'); 
    $("#Item2").css('display', 'none'); 
    $("#Item3").css('display', 'none'); 
    $("#Item4").css('display', 'block'); 
}

來源

2013-05-02 Ashwani Pandey

你可以發佈你的UI的屏幕截圖嗎？ – 2013-05-02 06:23:05

在頁面加載時，您想要執行點擊事件嗎？如果是，那麼執行此操作的時間間隔是多少？ – Roopendra 2013-05-02 06:24:48

http://imagesup.net/?di=16136747605116這裏是我的形象... – 2013-05-02 06:28:12

如前所述，你就可以設置調用不同的功能，像這樣的間隔：

var actions = [Fun1, Fun2, Fun3, Fun4]; 
var index = 0; 

function cycle() { 
    if(++index == actions.length) index = 0; 
    actions[index](); 
} 

window.setInterval(cycle, 5000);

但正如我在評論中提到，你很可能減少你的代碼只是一個單獨的評論，傳遞一個變量，在這種情況下，你的間隔可能看起來像這樣：

var index = 0; 
window.setInterval(function() { 
    if(++index > 4) index = 1; 
    Fun(index); 
}, 5000);

來源

2013-05-02 06:33:42

非常感謝你很棒...我從最近3小時被困在這個問題上.......我是新的jquery – 2013-05-02 06:35:56

自動功能腳本

回答

相關問題