javascript - 幻灯片放映第一张幻灯片超时时间较长

Question

我有一个必须修改的自定义图像幻灯片。我正在尝试延长第一张幻灯片的超时时间，基本上我希望它比其他幻灯片的可见时间长 2 秒。最好的方法是什么？这是代码:

(function($) {

var settings = {
        'promoid': 'promo',
        'selectorid': 'promoselector',
        'promoanimation': 'fade',
        'timeout': 4500,
        'speed': 'slow',
        'go': 'true',
        'timeoutname': 'promotimeout'
};

$.fn.promofade = function(options) {
    settings.promoid = $(this).attr("id");

    return this.each(function() {   
        $.promofade(this, options);
    });
};

$.promofade = function(container, options) {

    if ( options ) {
        $.extend( settings, options );
    }

    var elements = $("#" + settings.promoid).children();
    var selectors = $("#" + settings.selectorid).children();

    if ( elements.length != selectors.length ) { alert("Selector length does not match."); }

    if ( settings.go == 'true' )
    {
        settings.timeoutname = setTimeout(function() {
                $.promofade.next(elements, selectors, 1, 0);
                }, settings.timeout);
    } else {
        clearTimeout( settings.timeoutname );
    }
};

$.promofade.next = function( elements, selectors, current, last ) {

    if ( settings.promoanimation == 'fade' )
    {
        //$(elements[last]).fadeOut( settings.speed );
        //$(elements[current]).fadeIn( settings.speed );
        $(elements[last]).hide();
        $(elements[current]).show();
    } else if ( settings.promoanimation == 'slide' ) {
        // This creates a 'slide gap', where they havent crossed yet, causing a blank spot
        // TODO: fix!
        $(elements[last]).slideUp( settings.speed );
        $(elements[current]).slideDown( settings.speed );
    }

    $(selectors[last]).removeClass("on");
    $(selectors[current]).addClass("on");
    //$(selectors[current]).attr("class", "on");

    // They are both the same length so we only calculate for one
    if ( (current + 1) < elements.length ) {
        current = current + 1;
        last = current - 1;
    } else {
        current = 0;
        last = elements.length - 1;
    }

    if ( settings.go == 'true' )
    {
        settings.timeoutname = setTimeout( function() {
            $.promofade.next( elements, selectors, current, last );
        }, settings.timeout );
    } else {
        clearTimeout( settings.timeoutname );
    }
};
})(jQuery);

我的 html 是这样构建的:

<div id="fader">
    <a href="#"><img src="#" alt='#'/></a>
    <a href="#"><img src="#" alt='#'/></a>
    <a href="#"><img src="#" alt='#'/></a>
</div>

Answer 1

您可以通过指定在初始化期间分配的单独的第一张幻灯片超时来解决此问题，然后在 promofade.next 上使用标准超时。

(function($) {

    var settings = {
            'promoid': 'promo',
            'selectorid': 'promoselector',
            'promoanimation': 'fade',
            'firstslidetimeout':2000, //apply this during $.promofade only
            'timeout': 4500,
            'speed': 'slow',
            'go': 'true',
            'timeoutname': 'promotimeout'
    };

    $.fn.promofade = function(options) {
        settings.promoid = $(this).attr("id");

        return this.each(function() {   
            $.promofade(this, options);
        });
    };

    $.promofade = function(container, options) {

        if ( options ) {
            $.extend( settings, options );
        }

        var elements = $("#" + settings.promoid).children();
        var selectors = $("#" + settings.selectorid).children();

        if ( elements.length != selectors.length ) { alert("Selector length does not match."); }

        if ( settings.go == 'true' )
        {
            settings.timeoutname = setTimeout(function() {
                    $.promofade.next(elements, selectors, 1, 0);
                    }, settings.timeout + settings.firstslidetimeout);
        } else {
            clearTimeout( settings.timeoutname );
        }
    };

    $.promofade.next = function( elements, selectors, current, last ) {

        if ( settings.promoanimation == 'fade' )
        {
            //$(elements[last]).fadeOut( settings.speed );
            //$(elements[current]).fadeIn( settings.speed );
            $(elements[last]).hide();
            $(elements[current]).show();
        } else if ( settings.promoanimation == 'slide' ) {
            // This creates a 'slide gap', where they havent crossed yet, causing a blank spot
            // TODO: fix!
            $(elements[last]).slideUp( settings.speed );
            $(elements[current]).slideDown( settings.speed );
        }

        $(selectors[last]).removeClass("on");
        $(selectors[current]).addClass("on");
        //$(selectors[current]).attr("class", "on");

        // They are both the same length so we only calculate for one
        if ( (current + 1) < elements.length ) {
            current = current + 1;
            last = current - 1;
        } else {
            current = 0;
            last = elements.length - 1;
        }

        if ( settings.go == 'true' )
        {
            settings.timeoutname = setTimeout( function() {
                $.promofade.next( elements, selectors, current, last );
            }, settings.timeout);

        } else {
            clearTimeout( settings.timeoutname );
        }
    };
    })(jQuery);