自动功能脚本

我有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

自动功能脚本

回答

相关问题