1

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 元素根据原始的#rotatorholder 宽度固定其宽度。我已经设法在调整窗口大小时修复了元素宽度（第二个 js 部分），元素也通过在 jQuery Cycle 标注中使用“之前”获得了正确的新宽度，但仍然在一秒钟后，它们达到了它们的原始宽度。

看看： http: //jsfiddle.net/Cyber​​ek /Q7bAJ/

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

感谢帮助。

4

0 回答 0