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);

Answer 2

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

(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);

DEMO

幻灯片首次滑动超时更长

2 个答案: