Question

我的网站上有一个JQuery旋转器，带有幻灯片图像，我想让网站响应。我正在使用CSS媒体查询来完成它。当窗口宽度小于800px时，我想更改幻灯片宽度（在JS中定义）。这么久，我做了这样的事情：

var responsiveSlideWidth;

if ($(window).width() < 800) {
    responsiveSlideWidth = 700;
}
else {
    responsiveSlideWidth = 960;
}


var defaults = {
    container: '.rotatorWrapper',
    animationduration: 1000,
    slideWidth: responsiveSlideWidth
};

问题是它在页面重新加载后才起作用。这意味着：如果我调整窗口大小，则在重新加载页面之前它不起作用。

有什么建议吗？

感谢。

编辑：我的完整代码：

 (function ($) {

    $.fn.Rotator = function (options) {

        var responsiveSlideWidth;

        if ($(window).width() < 800) {
            responsiveSlideWidth = 700;
        }
        else {
            responsiveSlideWidth = 960;
        }


        var defaults = {
            container: '.rotatorWrapper',
            animationduration: 1000,
            slideWidth: responsiveSlideWidth
        };

        options = $.extend(defaults, options);
        elm = this;
        var pageIndex = 0,
            slideCount = 0;



        var _init = function () {
            slideCount = elm.find(options.container).children().children().length;
            elm.find(options.container).children().width(slideCount * options.slideWidth);
            _bindEvents();
            _togglePager();
        };


        var _bindEvents = function () {
            var jElm = $(elm);
            jElm.find('.prev').on('click', _previous);
            jElm.find('.next').on('click', _next);
        };

        var _next = function (e) {
            e.preventDefault();

            if (pageIndex >= 0 && pageIndex < slideCount - 1) {
                pageIndex++;

                elm.find(options.container).children().animate({
                    left: "-=" + options.slideWidth
                }, options.animationduration);
            }

            _togglePager();
        };

        var _previous = function (e) {
            e.preventDefault();

            if (pageIndex <= slideCount) {
                pageIndex--;
                elm.find(options.container).children().animate({
                    left: "+=" + options.slideWidth
                }, options.animationduration);
            }
            _togglePager();
        };

        var _togglePager = function () {
            var $elm = $(elm);
            var prev = $elm.find('.prev');
            var next = $elm.find('.next');

            console.log('slide count' + pageIndex + ' Page Index' + pageIndex)

            if (pageIndex >= slideCount - 1) {
                next.hide();
            } else {
                next.show();
            }

            if (pageIndex <= 0) {
                prev.hide();
            } else {
                prev.show();
            }
        }

        return _init(elm);
    }
})(jQuery);

使用JQuery更改窗口宽度，而无需再次重新加载页面

0 个答案: