0

我有 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');
}
4

1 回答 1

0

如前所述，您将能够设置调用不同函数的间隔，如下所示：

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-02T06:33:42.380 回答