Автоматический скрипт функции

Question

У меня есть 4 функции для кнопок и относительного div. В основном, когда мы нажимаем кнопку, он должен скрывать некоторый 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'); 
} 

Answer 1

Как уже говорилось, вы могли бы установить интервал, который вызывает различные функции следующим образом:

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