Javascript JQuery根据窗口大小重新加载三个设置变量

我试图根据窗口的大小为bxSlider加载三个设置变量。我希望在调整浏览器大小时动态加载新设置，而不仅仅是加载。我有下面的代码来设置变量，我只是努力让它与mySlider的底部变量配合得很好，这就是在调整大小时对脚本进行调整的原因

有人能提供小费吗

$(document).ready(function () {     
        /* Set variables for the maxSlides option */
        var slidenumber,
            width = $(window).width();

        if (width < 768) {
            slidenumber = 1;
        } else if (width < 1024) {
            slidenumber = 2;
        } else {
            slidenumber = 3;
        }

        $('.bxslider').bxSlider({
            slideWidth: 5000,
            minSlides: slidenumber,
            maxSlides: slidenumber,
            slideMargin: 50
        });

        var mySlider;

        function tourLandingScript() {
            mySlider.reloadSlider(slidenumber());
        }

        mySlider = $('.bxslider').bxSlider(slidenumber());
        $(window).resize(tourLandingScript);

});

$（文档）.ready（函数（）{
/*设置maxSlides选项的变量*/
var Slidember，
宽度=$（窗口）.width（）；
如果（宽度<768）{
slidenumber=1；
}否则如果（宽度<1024）{
slidenumber=2；
}否则{
slidenumber=3；
}
$（'.bxslider'）.bxslider({
滑动宽度：5000，
米斯莱德斯：斯莱登姆伯，
maxSlides:slidenumber，
幻灯片摘要：50
});
mySlider变种；
函数tourLandingScript（）{
重载滑块（slidenumber（））；
}
mySlider=$（'.bxslider'）.bxslider（slidenumber（））；
$（窗口）。调整大小（tourLandingScript）；
});

实现这一点的最佳方法是使用CSS和媒体查询，这样您就可以隐藏或缩小幻灯片而无需更改其编号。然而，如果您需要更复杂的行为，而这些行为仅仅用简单的CSS是无法实现的，那么您需要为其编写一些javascript

您需要监听窗口的resize事件，当它触发时，重新计算所需的幻灯片数量，如果它发生变化，则使用它的reloadSlider（）方法更新滑块。代码可能看起来像这样：

 $(document).ready(function () {     

    var slideCount;
    var mySlider;        

    // separate function to calculate required slide count
    function calculateSlides() {
        var width = $(window).width();
        var slidenumber;
        if (width < 768) {
            slidenumber = 1;
        } else if (width < 1024) {
            slidenumber = 2;
        } else {
            slidenumber = 3;
        }
        return slidenumber;
    }

    // when page loads, we initialize the slider
    slideCount = calculateSlides();
    mySlider = $('.bxslider').bxSlider({
        slideWidth: 5000,
        minSlides: slideCount,
        maxSlides: slideCount,
        slideMargin: 50
    });

    // when we resize the window, just recalculate number of slides
    // and if it has changed, reload the slider

    $(window).resize(function() {
        var newSlideCount = calculateSlides();
        if (newSlideCount != slideCount) {
            slideCount = newSlideCount;
            mySlider.reloadSlider({
                minSlides: newSlideCount,
                maxSlides: newSlideCount 
            });
        }
    });

});

$（文档）.ready（函数（）{
var slideCount；
mySlider变种；
//用于计算所需幻灯片计数的单独函数
函数calculateSlides（）{
变量宽度=$（窗口）.width（）；
var-slidember；
如果（宽度<768）{
slidenumber=1；
}否则如果（宽度<1024）{
slidenumber=2；
}否则{
slidenumber=3；
}
返回滑块；
}
//当页面加载时，我们初始化滑块
slideCount=计算滑块（）；
mySlider=$（'.bxslider'）.bxslider({
滑动宽度：5000，
小幻灯片：幻灯片计数，
maxSlides:slideCount，
幻灯片摘要：50
});
//调整窗口大小时，只需重新计算幻灯片的数量
//如果已更改，请重新加载滑块
$（窗口）。调整大小（函数（）{
var newSlideCount=calculateSlides（）；
if（newSlideCount！=slideCount）{
slideCount=newSlideCount；
mySlider.reloadSlider({
minSlides:newSlideCount，
maxSlides:newSlideCount
});
}
});
});

我还添加了一些小优化，这样浏览器就不会在每次调整窗口大小时重建整个滑块组件（拖动窗口边缘调整窗口大小时每秒会触发几次），而只会在实际幻灯片数量发生变化时才重建

---

希望这能有所帮助。

感谢Ondra Koupil的帮助，但是我无法让他的解决方案完全按照要求工作，我最终选择了一种全新的方法，我相信可以将其分离以进行优化，这不可能是最有效的选择，但它对我很有用，希望能对其他人有用

下面的解决方案是两个完全独立的JS，如果组合在一个页面上，将无法工作。目的是在相关页面上加载相关选项（设置1/2）

/* Settings one */
$(document).ready(function () { 
    var settings = function() {
    var settings1 = { /* Desktop */
            minSlides: 3,
            maxSlides: 3,
            moveSlides: 1,
            slideWidth: 5000, /* Intentionally set to high value, bxslider will auto calculate */
            slideMargin: 50
        };
        var settings2 = { /* Mobile */
            minSlides: 1,
            maxSlides: 1,
            moveSlides: 1,
            slideWidth: 2000 /* Intentionally set to high value, bxslider will auto calculate */
        };
        return ($(window).width()<1200) ? settings2 : settings1;
    }

    var mySlider;

    function reloadonresize() {
        mySlider.reloadSlider(settings());
    }

    mySlider = $('.bxslider').bxSlider(settings());
    $(window).resize(reloadonresize);


});
/* End settings */

/* Settings two */
$(document).ready(function () { 
    var settings = function() {
    var settings1 = { /* Desktop */
            minSlides: 4,
            maxSlides: 5,
            moveSlides: 3,
            slideWidth: 5000, /* Intentionally set to high value, bxslider will auto calculate */
            slideMargin: 50
        };
        var settings2 = { /* Mobile */
            minSlides: 2,
            maxSlides: 2,
            moveSlides: 1,
            slideWidth: 2000 /* Intentionally set to high value, bxslider will auto calculate */
        };
        return ($(window).width()>=768) ? settings1 : settings2;
    }

    var mySlider;

    function reloadonresize() {
        mySlider.reloadSlider(settings());
    }

    mySlider = $('.bxslider').bxSlider(settings());
    $(window).resize(reloadonresize);


});
/* End settings */

/*设置一*/
$（文档）.ready（函数（）{
变量设置=函数（）{
变量设置1={/*桌面*/
米斯利德斯：3，
maxSlides:3，
第一,，
slideWidth:5000，/*故意设置为高值，bxslider将自动计算*/
幻灯片摘要：50
};
变量设置2={/*移动*/
米斯利德斯：1，
maxSlides:1，
第一,，
slideWidth:2000/*故意设置为高值，bxslider将自动计算*/
};
返回（$（窗口）.width（）=768）？设置1：设置2；
}
mySlider变种；
函数重载调整大小（）{
重载滑块（settings（））；
}
mySlider=$（'.bxslider'）.bxslider（settings（））；
$（窗口）。调整大小（重新加载调整大小）；
});
/*结束设置*/

slidenumber

不是一个函数。将

slidenumber（）

替换为

slidenumber

。您好，Ondra，谢谢您的帮助，这几乎是完美的。这将在初始加载时正确加载所有内容（根据浏览器大小而变化），但在调整大小时不会正确更改？例如，如果加载到1024px以上，将显示三张幻灯片，但当您缩小（低于1024px）时，滑块将恢复为仅一张幻灯片。如果随后增加浏览器大小，则只剩下一张幻灯片。关于如何改进这一点有什么想法吗？谢谢，可能有一些我不知道的警告-我不每天使用bxSlider。您确定它支持动态更改幻灯片数量吗？也许可以尝试添加一些调试日志记录，例如，在reloadSlider（）行的前面添加

console.log（slideCount）

，然后查看打印出的内容。然后，您将看到问题是否出在这个脚本中，或者bxSlider无法处理幻灯片计数的变化……它肯定支持动态加载，正如我以前使用不同的脚本所做的那样，但我只能让它支持两种大小，即低于768px或更高。这里找到了它的脚本。其他人能解释一下如何完善上述代码吗？很近，但我撞到了砖墙。。。