javascript - 递归函数中的jQuery递增变量

Question

还有其他问题与此标题几乎相同，但它们似乎没有回答我的问题。

我正在尝试制作一个简单的 javascript 函数，该函数使用 jQuery 使 div block 一个接一个地淡入淡出，并在结束时返回到第一个 div。当用户在页面上时，这应该会继续，就像幻灯片一样。

有 5 个“幻灯片”或 div 按顺序显示和隐藏。它们有类“content1”、“content2”、“content3”等。

$(document).ready(function() {

            var slide = 1;
            nextSlide(slide);

            function nextSlide(slide) {
                $('.content' + slide.toString()).fadeTo(2000, 1.0).delay(5000).fadeTo(2000, 0.0).delay(2000);

                if(slide > 5) {
                    slide = 1;
                } else {
                    slide++;
                }

                nextSlide(slide);
            };
        });

这不会按顺序淡入和淡出每个 div，它实际上所做的是同时淡入和淡出所有幻灯片。

如何让它依次引用每个幻灯片类，然后循环回到第一张幻灯片？

非常感谢。

Answer 1

您的函数将立即递归，大约同时分派(dispatch)所有动画请求。

要错开它们，您应该递归 timeout :

$(document).ready(function() {

        var slide = 1;
        nextSlide();

        function nextSlide() {
            $('.content' + slide.toString()).fadeTo(2000, 1.0).delay(5000).fadeTo(2000, 0.0).delay(2000);

            if(slide > 5) {
                slide = 1;
            } else {
                slide++;
            }

            setTimeout(nextSlide, 2000); // second param is delay in ms
        };
    });

这将导致下一次调用在 2000 毫秒后发生。多亏了闭包，您的 slide 变量应该被捕获并在调用之间保留它的值。