Javascript 滑块在加载时响应，但在调整大小时不响应

我使用的插件，并已调整为一个全宽度的图像滑块。它在加载时是有响应的，但我也很难让它在调整大小时响应。看起来宽度在加载时固定为特定值（由JS），CSS中定义的百分比宽度不再适用

任何帮助都将不胜感激，因为我还不会写JS。提前谢谢

CSS:

生成宽度的JS（假设来自注释）。完整的JS文件暂时链接

---

当我取消灰色的“宽度”和“面板宽度”并应用值时，我会得到奇怪的结果。如果需要，可以详细说明。可能是我的一些CSS与JS中处理这些选项的方式有冲突。

请尝试使用以下代码

$(function(){
    $('.slider').movingBoxes({
        startPanel   : 1,      // start with this panel
        wrap         : false,  // if true, the panel will infinitely loop
        buildNav     : false,  // if true, navigation links will be added
        navFormatter : function(){ return "●"; }
    });
});

$(window).on('resize', function() {
    $('.slider').movingBoxes();
});

我没有测试它，但我认为它应该工作。如果没有，您可以使用传递给

movingboxs

方法的不同参数进行实验。插件本身的初始化方式如下：

$.fn.movingBoxes = function(options, callback, flag){
    var mb;
    return this.each(function(){
        mb = $(this).data('movingBoxes');
        // initialize the slider but prevent multiple initializations
        if ((typeof(options)).match('object|undefined')){
            if (mb && options instanceof $ && options.length) {
                // pass a jQuery object to change panels
                mb.change(options, callback, flag);
            } else if (mb) {
                mb.update(callback, flag);
            } else {
                (new $.movingBoxes(this, options));
            }
        } else if (mb) {
            // page #, autoplay, one time callback, if flag is false then no events triggered and animation time = 0
            mb.change(options, callback, flag);
        }
    });
};

---

我们在这里面临的所有问题都是

movingboxs

实例的重复。例如，对象初始化为onload。然后调整窗口的大小，问题是对象是否只会被更新（期望的行为），或者它是否会创建第二个实例，这可能会导致不可预测的行为。代码中的注释表明它不会被多次初始化。

您好，谢谢您的输入。在调整大小时调用相同的函数是有意义的，但不幸的是，它无法工作（当前已上载）。我遇到了意想不到的事情。当我移除在加载时调用它的函数，并保持在resize时调用它时，就会发生这种情况。因此，在调整大小时，它会在您开始调整大小时立即加载JS，但之后会立即停止响应。（当前上传）似乎只要加载JS，CSS中写入的宽度值就会被JS用固定值覆盖；$（窗口）.resize（函数（）{cleartimout（timer）；var slider=$（'.slider'）.data（'movingboxs'）；slider.options.width=$（窗口）.width（）*1；//使100%的浏览器宽度slider.options.panelWidth=0.8；//使80%的包装宽度//防止连续更新，也称为throttle resize timer=setTimeout（函数（）{slider.update（false）；}，100）；}）；在调整大小时加载函数，但它只将其应用于第一个滑块，而不是其他滑块。类名都是一样的。有什么想法吗？当您调用

$（'.slider'）.data（'movingboxs'））

选择器使用

.slider

类拾取所有元素，但

jQuery。数据

函数仅在第一个函数上调用。我建议使用

jQuery包装所有操作。每个

并将

计时器

定义为一个数组。查看整个代码。它显然不会在小提琴中工作，但我将它放在那里只是为了使它更具可读性。呜！就像一个符咒。谢谢你的修复，谢谢你的解释。非常感谢。

// deprecated options - but still used to keep the plugin backwards compatible
// and allow resizing the overall width and panel width dynamically (i.e. on window resize)
// width        : '100%',       // overall width of movingBoxes 
// panelWidth   : 0.8        // current panel width adjusted to 80% of overall width

$(function(){
    $('.slider').movingBoxes({
        startPanel   : 1,      // start with this panel
        wrap         : false,  // if true, the panel will infinitely loop
        buildNav     : false,  // if true, navigation links will be added
        navFormatter : function(){ return "●"; }
    });
});

$(window).on('resize', function() {
    $('.slider').movingBoxes();
});

$.fn.movingBoxes = function(options, callback, flag){
    var mb;
    return this.each(function(){
        mb = $(this).data('movingBoxes');
        // initialize the slider but prevent multiple initializations
        if ((typeof(options)).match('object|undefined')){
            if (mb && options instanceof $ && options.length) {
                // pass a jQuery object to change panels
                mb.change(options, callback, flag);
            } else if (mb) {
                mb.update(callback, flag);
            } else {
                (new $.movingBoxes(this, options));
            }
        } else if (mb) {
            // page #, autoplay, one time callback, if flag is false then no events triggered and animation time = 0
            mb.change(options, callback, flag);
        }
    });
};