Javascript 幻灯片放映第一张幻灯片超时更长

我有一个自定义的图像幻灯片，我必须修改。我试图使第一张幻灯片超时更长，基本上我希望它比其他幻灯片的可视时间长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>

---

您可以通过在初始化期间指定单独的第一个幻灯片超时来解决此问题，然后在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);

---

您可能需要在两个地方进行更改以获得所需的内容

(function ($) {
    var settings = {
        'promoid': 'promo',
        'selectorid': 'promoselector',
        'promoanimation': 'fade',
        'timeout': 4500,
        'firstAdditionalTimeout': 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.firstAdditionalTimeout); // here 
        } 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);
            }, current == 1 ? (settings.timeout + settings.firstAdditionalTimeout) : settings.timeout); // and here
        } else {
            clearTimeout(settings.timeoutname);
        }
    };
})(jQuery);

---

这将使滑块在第一次迭代中等待更长的时间，如果需要使每个迭代的超时时间更长，请考虑我的答案。