Question

我的网站上有一个jquery幻灯片。使用css宽度：100％，每张幻灯片的宽度为100％。每张幻灯片中都有一个单独的div，宽度为1160px，margin为0，自动将其置于幻灯片中心。每个幻灯片都有一个不同的背景图像，它居中，因此它会滑出幻灯片的边缘。

在我调整浏览器窗口大小之前，幻灯片中的图像和导航正确处理似乎都正常。当我这样做时，幻灯片似乎保留了页面加载时的初始宽度。当我刷新幻灯片重新居中，一切都回到位置。

如何在每次调整窗口大小时不必刷新页面时如何使幻灯片保持100％宽度？

Answer 1

你看过$(window).resize(function(e) { /* do re-sizing work */ })

吗？

进一步扩展：

我必须首先说，除非在其他地方动态重置宽度，或者如果父级具有设定宽度，否则你的div上的100％宽度不应该有多大原因。

但是如果你必须有一个jQuery的例子只有一种方式可以做（有很多），这里你去：

//  simple way to start jQuery, similar to `window.onload = function(event) {`
$(function() {
    //  Establish a simple timer var to make sure code doesnt run like a wild hamster on sesame seed oil
    var tmrResize;
    //  jQuery way to call `window.onresize = function(event) {`
    $(window).resize(function(e) {
        //  simply clear timer, no need for if statement, if it's undefined, its cleared
        clearTimeout(tmrResize);
        //  set timer for 1/4 of a second which outa be enough time to know someone is done resizing a window,
        //  the longer the timer, the more glitchy it will appear in the end
        //  and fyi, i see alot of people shorten timers by replacing the function call,
        //  example (   setTimeout(myFunction, 250);    )
        //  i can tell ya from experience, such method is not "cross-browser" friendly
        //  just simply put your function, if external, inside the function call
        tmrResize = setTimeout(function() {
            //  jQuery standard similar to document.getElementsByTagName("div").style.width = screen.width
            $("div").width($(document).width());
        }, 250);
    });
});

另见：

当我调整浏览器大小时，如何让jquery幻灯片显示调整为100％宽度？

1 个答案: