Question

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

我的问题是这个 - 我有一段网站上有一些引号，它们淡入然后滑出视图，显示一个新的报价。这是我犯了错误。我把它设置得很完美，以便循环遍历所有引号......但随后停止。我希望他们重复一遍。我知道我的错误是使用.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); 


});

非常感谢

Answer 1

这应该对你有所帮助。这个怎么运作？您将当前作业计数器设置为0.然后，使用setInterval，每3秒运行一次主函数，该函数会递增作业计数器。如果计数器超过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);
}

Answer 2

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

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

将setTimeout交换为setinterval，任何人都可以帮我解决这个问题

2 个答案: