使用 jQuery 在轮播中调整 div 的大小答案

【问题标题】：Resizing divs within a carousel with jQuery使用 jQuery 在轮播中调整 div 的大小
【发布时间】：2016-07-01 06:42:46
【问题描述】：

我目前正在创建一个不使用插件的纯 jQuery 轮播。

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

目前使用 $(window).width 方法来确定 li (picture_slide) 的大小，由于有 3 个图像，ul (.slider) 宽度为 $(window).width * 3。

但是，无论何时我尝试调整它的大小，图像都适合屏幕，但动画似乎无法正常工作。

这是我创建的插件，它可以工作但不能调整大小

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

【问题讨论】：

标签： javascript jquery css carousel image-resizing

【解决方案1】：

当您调整屏幕大小时，您不会更改y 的值。这意味着它仍然具有旧窗口大小的值，这会导致动画以不正确的宽度进行动画处理。

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

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

【讨论】：