gpt4 book ai didi

javascript - slider 响应加载,但不调整大小

转载 作者:太空宇宙 更新时间:2023-11-04 14:29:19 25 4
gpt4 key购买 nike

我正在使用 Moving Boxes插件,并将其调整为全 Angular 图像 slider 。它对负载有响应,但我也很难让它对调整大小做出响应。似乎宽度在​​加载时固定为特定值(由 JS),并且 CSS 中定义的百分比宽度不再适用。

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

Testing site

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文件临时链接here .

 // 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 中处理这些选项的方式冲突。

最佳答案

尝试使用下面的代码

$(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 实例的重复。例如。对象初始化加载。然后你调整窗口大小,问题是对象是否只会被更新(期望的行为)或者它会创建第二个实例,这可能会导致不可预测的行为。代码中的注释表明它不会被多次初始化。

关于javascript - slider 响应加载,但不调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19292915/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com