0

我正在使用Moving Boxes插件，并将其调整为全角图像滑块。它对负载有响应，但我也无法让它响应调整大小。看起来宽度在加载时（由 JS）固定为特定值，并且 CSS 中定义的百分比宽度不再适用。

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

测试现场

CSS：

.slider {
    width: 100%;
}

.slider li {
    width: 80%;
}

.mb-wrapper {
    margin: 0 auto;
    position: relative;
    left: 0;
    width:100% !important;
    top: 0;
}

/* Panel Wrapper */
.mb-slider, .mb-scroll {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    position: relative;
    left: 0;
    top: 0;
}

/*** Slider panel ***/
.mb-slider .mb-panel {
    margin: 0;
    display: block;
    cursor: pointer;
    float: left;
    list-style: none;
}

.mb-panel.current img {
    opacity:1;
    filter: alpha(opacity=100);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

/*** Inside the panel ***/
.mb-inside {
    width:90%;
    margin:0 auto;
}

.mb-inside img {
    width:100%;
    opacity:0.4;
    filter: alpha(opacity=40);
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}

.mb-inside * {
    max-width: 100%;
}

生成宽度的 JS（从注释中假设）。完整的 JS 文件暂时链接在这里。

 // defaults
                base.$window = base.$el.parent(); // mb-scroll
                base.$wrap = base.$window.parent() // mb-wrapper
                    .prepend('<a class="mb-scrollButtons mb-left"></a>')
                    .append('<a class="mb-scrollButtons mb-right"></a><div class="mb-left-shadow"></div><div class="mb-right-shadow"></div>');

                base.$panels = base.$el.children().addClass('mb-panel');
                base.runTime = $('.mb-slider').index(base.$el) + 1; // Get index (run time) of this slider on the page
                base.regex = new RegExp('slider' + base.runTime + '=(\\d+)', 'i'); // hash tag regex

                base.initialized = false;
                base.currentlyMoving = false;
                base.curPanel = (o.initAnimation) ? 1 : base.getHash() || o.startPanel;
                // save original slider width
                base.width = (o.width) ? parseInt(o.width,10) : base.$el.width();
                // save panel width, o.panelWidth originally a fraction (0.5 of o.width) if defined, or get first panel width
                // now can be set after initialization to resize using fraction (value <= 2) or px (all values > 2)
                base.pWidth = (o.panelWidth) ? (o.panelWidth <=2 ? o.panelWidth * base.width : o.panelWidth) : base.$panels.eq(0).width();

JS 文件的一部分可以在其中更改某些选项。在这些选项的底部，它说：

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

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

4

1 回答 1

1

尝试使用以下代码

$(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 "&#9679;"; }
    });
});

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

我没有测试它，但我认为它应该可以工作。如果没有，您可以尝试传递给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);
        }
    });
};

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

于 2013-10-10T10:22:27.520 回答