Question

html代码：

<div id="rotatorholder">
    <div id="slide1" class="slide"></div>
    <div id="slide2" class="slide"></div>
    <div id="slide3" class="slide"></div>
</div>

CSS代码：

#rotatorholder {
    margin: 0;
    border-bottom: 1px solid #cacaca;
    height: 100px;
    overflow: hidden;
}
#rotatorholder .slide {
    height: 100px;
    width: 100%;
}
#rotatorholder #slide1 {
    background: transparent url('http://swiatlemmalowane.pl/tmp/test.jpg') 50% 0 no-repeat;
}
#rotatorholder #slide2 {
    background: transparent url('http://swiatlemmalowane.pl/tmp/test.jpg') 50% 0 no-repeat;
}
#rotatorholder #slide3 {
    background: transparent url('http://swiatlemmalowane.pl/tmp/test.jpg') 50% 0 no-repeat;
}

js代码：

$('#rotatorholder').cycle({
    before: function () {
        console.log($('#rotatorholder').width());
        $("#rotatorholder div.slide").each(function () {
            $(this).width($('#rotatorholder').width());
        })
    }
    after: function () {
        console.log($('#rotatorholder').width());
        $("#rotatorholder div.slide").each(function () {
            $(this).width($('#rotatorholder').width());
        })
    }
});

$(window).resize(function () {
    var boxwidth = $('#rotatorholder').width();
    $("#rotatorholder div.slide").each(function () {
        $(this).width(boxwidth);
    })
});

问题：一切正常，直到浏览器窗口调整大小。之后.slide元素根据oryginal #rotatorholder宽度得到它们的宽度。我已设法在窗口大小调整（第二个js部分）时修复元素宽度，在jQuery循环标注中使用“之前”元素也获得正确的新宽度，但仍然在一秒之后，它们达到它们的边缘宽度。

请查看：http://jsfiddle.net/Cyberek/Q7bAJ/

以较小的浏览器宽度运行它，然后重新缩放到浏览器以获得更大的宽度 - 图像的“中心”仍应位于中心并且正在调整大小，但是当您停止调整大小并等待循环更改元素时，以某种方式滑动宽度到达原始容器宽度。

感谢您的帮助。

jQuery循环，100％宽度，垂直居中的图像，窗口调整大小问题

0 个答案: