Question

我目前正致力于使用无插件创建纯jQuery轮播。

我被告知添加智能大小调整jQuery事件处理程序是一种非常好的方法。但是，我只是不知道如何将它集成到我正在创建的插件中。

目前正在使用$（window）.width方法来确定li（picture_slide）的大小，并且由于有3个图像，ul（.slider）宽度为$（window）.width * 3。 / p>

然而，每当我尝试调整大小时，图像都适合屏幕，但动画似乎不起作用。

这是我创建的插件有效，但没有调整大小

;
(function($, window, document, undefined) {
"use strict";
var pluginName = "chrisCarousel",
    defaults = {
        rotationSpeed: 1000,
        screenTime: 1000
    };

function Plugin(element, options) {
    this.element = element;
    this.settings = $.extend(defaults, {}, options);
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
}

$.extend(Plugin.prototype, {
    init: function () {
        this.myCarousel();
    },

    myCarousel: function () {
     var y = $(window).width();

        var t = setInterval(function () {
            $("#my_carousel ul").animate({marginLeft: - y }, defaults.rotationSpeed, function () {
                $(this).find(".picture_slide:last").after($(this).find(".picture_slide:first"));
                $(this).css({marginLeft: 0});
            })
        }, defaults.screenTime);
        $(".picture_slide").css("width", y);
        $(".slider").css("width", y * 3);       
    }
} );

$.fn[ pluginName ] = function( options ) {
    return this.each( function() {
        if ( !$.data( this, "plugin_" + pluginName ) ) {
            $.data( this, "plugin_" +
                pluginName, new Plugin( this, options ) );
        }
    } );
};

} )( jQuery, window, document );

这是我被告知要查看的智能大小调整： http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Answer 1

当您重新调整屏幕大小时，您不会更改y的值。这意味着它仍然具有旧窗口大小的值，这将导致动画为不正确的宽度量设置动画。

我建议将y设为全局变量，并在用户调整大小时使用此值重新计算y的值。

$(window).on('resize', function(e) {
    y = $(window).width();
});

使用jQuery调整轮播中的div

1 个答案: