JQuery每个功能之间暂停非功能

发布于 2024-11-17 00:58:19 字数 485 浏览 6 评论 0原文

此 JQuery 函数应该超时,以确保每个项目在最后一个项目后延迟 8 秒。这样就生成了一个图像淡入和淡出相隔 8 秒的画廊。

这不起作用。

任何想法。

function gallery() {
    var timeout = 0;
    $('.cornerimg').each(function() {
        setTimeout(function() {
            $(this).addClass('cornerimgfocus');
            setTimeout(function() {
                $(this).removeClass('cornerimgfocus');
                timeout += 8000;
            }, (timeout + 8000));
        },timeout); 
    });
}

奇妙

This JQuery function should timeout to ensure that each item is delayed 8 seconds after the last. Thus producing a gallery where images fade in and out 8 seconds apart from each other.

It doesn't work.

Any ideas.

function gallery() {
    var timeout = 0;
    $('.cornerimg').each(function() {
        setTimeout(function() {
            $(this).addClass('cornerimgfocus');
            setTimeout(function() {
                $(this).removeClass('cornerimgfocus');
                timeout += 8000;
            }, (timeout + 8000));
        },timeout); 
    });
}

Marvellous

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

江湖正好 2024-11-24 00:58:19

setTimeout(func, 0) 不会立即执行该函数,仅在当前脚本完成后才执行,因此 timeout 仅在 setTimeout 执行完毕后才会递增要求所有弯道(具有相同的延迟)。试试这样:

function gallery() {
    var timeout = 0;
    $('.cornerimg').each(function() {
        setTimeout(function() {
            $(this).addClass('cornerimgfocus');
            setTimeout(function() {
                $(this).removeClass('cornerimgfocus');
            }, 8000);
        },timeout);
    timeout += 8000;
    });
}

setTimeout(func, 0) does not immediately execute the function, only after the current script finished, so timeout only gets incremented after setTimeout has been called for all the corners (with identical delay). Try it like this:

function gallery() {
    var timeout = 0;
    $('.cornerimg').each(function() {
        setTimeout(function() {
            $(this).addClass('cornerimgfocus');
            setTimeout(function() {
                $(this).removeClass('cornerimgfocus');
            }, 8000);
        },timeout);
    timeout += 8000;
    });
}
旧城空念 2024-11-24 00:58:19
   var $images = $( '.cornerimg' );
    var current_image = 0;

    function gallery() {

        $images[ current_image ].addClass( 'cornerimgfocus' );

        setTimeout( function() {

            $images[ current_image ].removeClass( 'cornerimgfocus' );

            current_image += 1;

            if ( current_image > $images.length - 1 ) {
                current_image = 0;
            }

            // remove this if you don't need additional timeout
            setTimeout( gallery, 8000 );

        }, 8000);

}
   var $images = $( '.cornerimg' );
    var current_image = 0;

    function gallery() {

        $images[ current_image ].addClass( 'cornerimgfocus' );

        setTimeout( function() {

            $images[ current_image ].removeClass( 'cornerimgfocus' );

            current_image += 1;

            if ( current_image > $images.length - 1 ) {
                current_image = 0;
            }

            // remove this if you don't need additional timeout
            setTimeout( gallery, 8000 );

        }, 8000);

}
温馨耳语 2024-11-24 00:58:19

您可能想使用递归和某种索引。

创建一个函数,从上一张图像(或者可能只是所有图像,如果可行的话)中移除焦点,然后将cornerimgClass放在与提供给该函数的索引相匹配的图像上。然后,一旦完成,它就会使用 setTimeout 在 8 秒内再次调用自己,索引增加 1。

您需要检查何时到达列表末尾,然后停止、重置为 0 或您喜欢的任何内容。

但关键是使用命名函数的递归而不仅仅是匿名函数。

You probably want to use recursion and some kind of index.

Create a function that remove the focus from the previous image (or perhaps just all the images if that will work) and then puts the cornerimgClass on the one that matches an index supplied to the function. Then once this is done it uses setTimeout to call itself agin in 8 seconds with the index incremented by one.

You'll want to do a check for when you reach the end of the list and either stop, reset to 0 or whatever you fancy.

The key thing though is to use recursion with named functions rather than just anonymous functions.

爱的十字路口 2024-11-24 00:58:19

在您的 setTimeout 调用中,“this”不等于您认为的元素,它等于 DOMWindow。尝试这个版本,因为我发现它更简单。

function gallery() {
    var imgs = $('.cornerimg.');
    var timer = 8000; // default starting time


    var fade = function(element) {
        setTimeout(function() {
            element.addClass('cornerimgfocus');
        }, timer);

        timer += 8000;

        setTimeout(function() {
            element.removeClass('cornerimgfocus');
        }, timer);
    };

    for (var i = 0; i < imgs.length; i += 1) {
        fade(imgs.eq(i));
    }
}

In your setTimeout calls, 'this' is not equal to the element you think it is, it's equal to the DOMWindow. Try this version instead as I found it to be simpler.

function gallery() {
    var imgs = $('.cornerimg.');
    var timer = 8000; // default starting time


    var fade = function(element) {
        setTimeout(function() {
            element.addClass('cornerimgfocus');
        }, timer);

        timer += 8000;

        setTimeout(function() {
            element.removeClass('cornerimgfocus');
        }, timer);
    };

    for (var i = 0; i < imgs.length; i += 1) {
        fade(imgs.eq(i));
    }
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文