自动化功能脚本

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