0

我目前正在构建测试网站，以帮助我更多地理解编码，并尝试更好地掌握这一切是如何结合在一起的。

我的问题是这个 - 我有一个带有许多引号的网站部分，它们淡入然后滑出视图，显示一个新的引号。这是我犯了错误。我把它设置得很完美，这样它就会循环遍历所有的引号......但是然后停止。我希望他们重复。我知道我的错误是使用 .setTimeout 函数而不是 setInterval 代码。

我的问题是，是否有一个简单的解决方案来交换代码，我花了很长时间才把头绕在这个大声笑上

这是您查看的代码。任何帮助将不胜感激。

$(function(){
setTimeout(function()
    {
    $("#jobs_1").slideUp(800);
    }, 4000); 
});
$(function(){
setTimeout(function()
    {
    $("#jobs_2").fadeIn(400);
    }, 4800); 
}); 
$(function(){
setTimeout(function()
    {
    $("#jobs_2").slideUp(800);
    }, 8000); 
});
$(function(){
setTimeout(function()
    {
    $("#jobs_3").fadeIn(400);
    }, 8800); 
});     
$(function(){
setTimeout(function()
    {
    $("#jobs_3").slideUp(800);
    }, 12000); 
});
$(function(){
setTimeout(function()
    {
    $("#jobs_4").fadeIn(400);
    }, 12800); 
});
$(function(){
setTimeout(function()
    {
    $("#jobs_4").slideUp(800);
    }, 16000); 
});
$(function(){
setTimeout(function()
    {
    $("#jobs_1").fadeIn(400);
    }, 16800); 


});

非常感谢

4

2 回答 2

0

这应该可以帮助你。这个怎么运作？您将当前作业计数器设置为 0。然后，使用 setInterval，每 3 秒运行一次 main 函数，这会增加作业计数器。如果计数器超过 4（你的上一个工作），隐藏工作 4 并淡入他的第一个。否则滑出前一个工作并淡入新工作。

$(function(){
    count = 1;

    x = setInterval(function(){
        count++;
        if( count > 4) {
            $('jobs_4').hide(function(){
                $('#jobs_1').fadeIn();
            });

            count = 1
        } else {
            $('#jobs_' + (count-1)).slideUp(function(){
                $('#jobs_' + (count-1)).fadeIn();
            });
        }

    }, 3000);
}
于 2013-06-02T12:58:36.830 回答
0

您可以将所有块名称移动到堆栈中并使用一个函数：

var blocks = ['jobs_1', 'jobs_2', 'jobs_3', 'jobs_4'];
var curentBlockIndex = 0;
setInterval(function(){
    var nextBlockIndex = curentBlockIndex + 1;
    if (nextBlockIndex >= blocks.length) nextBlockIndex = 0;
    $('#' + blocks[curentBlockIndex]).slideUp(800, function(){
        $('#' + blocks[nextBlockIndex]).fadeIn(400);
    });

    curentBlockIndex = nextBlockIndex;
}, 4000);
于 2013-06-02T13:07:50.300 回答