jquery - 您将如何为 jquery 4 幻灯片无限交叉淡入淡出幻灯片优化此代码？

Question

我创建了一个 4 图像无限幻灯片，它或多或少地工作得很好（下面的代码）交叉淡入淡出每个图像并暂停一小段时间。然后在无限循环中重复。但我注意到转换的时间并不总是相同的。我也不确定我是否通过在 slides() 函数中调用 slides() 函数以最好的方式解决了这个问题。也许这就是导致时间不一致的原因？您将如何优化此代码？请记住，这必须是一个没完没了的幻灯片。提前致谢。

slides();

function slides() {
    $('#slide1').fadeTo(1200, 1).fadeTo(3000, 1, function () {
        $('#slide1').animate({
            opacity: 0
        }, 1500);
        $('#slide2').fadeIn(1500).fadeTo(3500, 1, function () {
            $('#slide2').animate({
                opacity: 0
            }, 1500);
            $('#slide3').fadeIn(1500).fadeTo(3500, 1, function () {
                $('#slide3').animate({
                    opacity: 0
                }, 1500);
                $('#slide4').fadeIn(1500).fadeTo(3500, 1, function () {
                    $('#slide4').animate({
                        opacity: 0
                    }, 1500);
                    slides();
                });
            });
        });

    });

}

Answer 1

slide(1);

function slide(n) {
  $('#slide' + n).fadeTo(1200, 1).fadeTo(3000, 1, function () {
        $('#slide' + n).animate({
            opacity: 0
        }, 1500);
        slide((n % 4) + 1);
  });
}