Question

我写了小'新闻报道'。我应该通过spans循环，每5秒制作一次fadeIn / fadeOut。

虽然没有动过，但它运行正常，但是当你尝试使用箭头时（例如向前播放箭头5次），脚本会疯狂地使fadeIn / fadeOut成为常量。

脚本：

        (function($) {

        $.fn.NoticeBoard = function() {


            // Set a timeout
            var timeOut = setTimeout(nextNotice, 5000);

            // pause on hover
            $('.noticeboard').hover(

            function() {
                clearTimeout(timeOut);
            }, function() {
                timeOut = setTimeout(nextNotice, 5000);
            });

            // Next notice function called on timeout or click

            function nextNotice(event) {
                clearTimeout(timeOut);
                timeOut = setTimeout(nextNotice, 5000);

                if ($('.noticeboard span:visible').is('.noticeboard span:last-child')) {
                    $('.noticeboard span:visible').fadeOut(300);
                    $('.noticeboard span:first-child').fadeIn();
                }
                else {
                    $('.noticeboard span:visible').fadeOut(300).next().fadeIn();
                }
                return false;
            }

            $('#notice-next').click(nextNotice);
            $('#notice-prev').click(function(event) {


                if ($('.noticeboard span:visible').is('.noticeboard span:first-child')) {
                    $('.noticeboard span:visible').fadeOut(300);
                    $('.noticeboard span:last-child').fadeIn();
                }
                else {
                    $('.noticeboard span:visible').fadeOut(300).prev().fadeIn();
                }
                return false;

            });

        };

    /*!  
    ---------------------------------------------*/

    })(jQuery);

    /*!  OnLoad
    ---------------------------------------------*/
    $(document).ready(function() {

        $('.noticeboard span').hide();
        $('.noticeboard span:first').show();
        $('.noticeboard').NoticeBoard();

    });

任何帮助修复问题都非常感谢。

Answer 1

I tried it here 我声明一个标志来携带fadeIn已经完成或没有，所以我们永远不会发生太多次事件......

Answer 2

我编辑了你的代码。你可以看到它here。这是关于阻止标志，它不会让你运行相同的代码太多次。我将setTimeout和clearTimeout的管理包装起来以便更好地控制。

jQuery滑块 - 意外行为

2 个答案: