Javascript 在彼此之后运行连续的事件

我已经做了两天了，很抱歉我对Javascript/Jquery还不熟悉，我正在学习

我试图创建一个javascript页面加载时，将有一个图像淡入淡出，在第一个图像淡入淡出后，然后第二个，第三个，等等，无论我需要多少

我知道这是一个新问题，但我显然不确定在这一点上要寻找什么。我一直在做研究和学习，我只想在我能完成的时间之前完成它

感谢您的帮助

这是我提出的，在我看来完全无效，但似乎有效：

    <div class="splashbg1" style="display: none;"></div>
<div class="splashbg2" style="display: none;"></div>
<div class="splashbg3" style="display: none;"></div>
<div class="splashbg4" style="display: none;"></div>
<div class="splashbg5" style="display: none;"></div>


<script>
$(document).ready(function() {
    $('.splashbg1').fadeIn(1300, function() {
    $('.splashbg1').fadeOut(1300, function() {
    $('.splashbg2').fadeIn(1300, function() {
    $('.splashbg2').fadeOut(1300, function() {
    $('.splashbg3').fadeIn(1300, function() {
    $('.splashbg3').fadeOut(1300, function() {
    $('.splashbg4').fadeIn(1300, function() {
    $('.splashbg4').fadeOut(1300, function() {
    $('.splashbg5').fadeIn(1300, function() {
    });
    });
    });
    });
    });
    });
    });
    });
    });
});
</script>

$（文档）.ready（函数（）{
$（'.splashbg1'）.fadeIn（1300，函数（）{
$（'.splashbg1'）.fadeOut（1300，函数（）{
$（'.splashbg2'）.fadeIn（1300，函数（）{
$（'.splashbg2'）.fadeOut（1300，function（）{
$（'.splashbg3'）.fadeIn（1300，函数（）{
$（'.splashbg3'）.fadeOut（1300，函数（）{
$（'.splashbg4'）.fadeIn（1300，函数（）{
$（'.splashbg4'）.fadeOut（1300，函数（）{
$（'.splashbg5'）.fadeIn（1300，函数（）{
});
});
});
});
});
});
});
});
});
});

您可以使用和一个包含当前图像的变量，然后淡入淡出它们。这取决于图像的存储方式。例如，如果有一个ID为

myImg

的

元素，则可以执行以下操作：

如果您想将其包装，可以执行

images[currentImage%images.length]

。如果有一堆不同的图像，您可以做同样的事情，只需将图像的ID保留在

图像中即可。
示例HTML：

var images = ['http://someurl.com/someimg.jpg', 'somethingelse.png', 'hello.gif'];
var currentImage = 0;

function next() {
    $('#myImg').fadeOut(function() {
        $('#myImg').prop('src', images[currentImage]).fadeIn(); // Set the image and fade in
        currentImage++; // Get ready for the next image
    });
}

next();

示例：
我在下面编写了一个名为
sequence
的快速函数。使用jQuery选择器列出要设置动画的图像，如下所示：

function switchImage(){
    $('#images img:visible').fadeOut(function(){
        $(this).next().length ? $(this).next().fadeIn() : $('#images img').eq(0).fadeIn();
    });
};
$('#images img').hide().eq(0).show(); // show only the first image
setInterval(switchImage, 2000); // loop through images every 2000 milliseconds

然后用类似下面的
序列调用下面的函数（list，200，function（）{}）

var sequence=函数（数组、持续时间、回调）{
变量列表=数组，
长度=list.length，
i=0，
持续时间=持续时间，
回调=回调；
函数chainFade（）{
如果（i<长度）
数组[i].fadeIn（持续时间）
.fadeOut（持续时间、功能（）{
i++；
链褪色（）；
});
其他的
回调类型==“函数”&&callback（）；
}
链褪色（）；
};

我还没有测试过它，所以如果您遇到任何错误，请告诉我。
欢迎来到stackoverflow。您可以发布html和您正在处理的代码，以便我们可以指出您希望了解的特定问题；minitech有一个漂亮的答案。如果您需要用于生产或使用的产品，请尝试jQuery的任何现有插件。搜索词是“jquerycarousel”：太棒了，谢谢！这与我所寻找的更为接近。再次抱歉，如何使其在图像末尾停止旋转？此版本：将在到达最后一个图像时停止。如果您对代码有任何疑问，请提问。
function switchImage(){
    $('#images img:visible').fadeOut(function(){
        $(this).next().length ? $(this).next().fadeIn() : $('#images img').eq(0).fadeIn();
    });
};
$('#images img').hide().eq(0).show(); // show only the first image
setInterval(switchImage, 2000); // loop through images every 2000 milliseconds

var list = [
    $('first'),
    $('second'),
    $('third')
    ];

var sequence = function( array, duration, callback ){
    var list = array,
        length = list.length,
        i = 0,
        duration = duration,
        callback = callback;

    function chainFade(){
        if( i < length )
            array[i].fadeIn( duration )
                    .fadeOut( duration, function(){
                        i++;
                        chainFade();
                    });
        else
            typeof callback == 'function' && callback();
    }
    chainFade();
};