Question

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

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

有5张幻灯片＆＃39;或div按顺序显示和隐藏。他们有课程内容1＆＃39;，＆＃39; content2＆＃39;，＆＃39; content3＆＃39;等

$(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

您的函数会立即递归，并在同一时间发送所有动画请求。

要错开它们，你应该用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
        };
    });

这将导致下一次调用在2000ms后发生。由于关闭，您应该捕获slide变量并在调用之间保持其值。

Answer 2

无需超时。只需将下一次迭代称为最后一个fadeTo方法的回调：

$(document).ready(function() {

        var slide = 1;
        nextSlide(slide);

        function nextSlide(slide) {
            $('.content' + slide.toString())
            .fadeTo(2000, 1.0)
            .delay(5000)
            .fadeTo(2000, 0.0, function(){
                if(slide > 5) {
                    slide = 1;
                } else {
                   slide++;
                }
                nextSlide(slide);
            });                
        };

});

http://jsfiddle.net/3L09b505/

递归函数中的jQuery增量变量

2 个答案: