Question

我有一个幻灯片使用jQuery Cycle插件，用背景图片改变div（图像非常宽，如果浏览器较小，它们应该居中并切断）。

<div class="banner_images">
    <div style="background-image:url(banners/1.jpg)"></div>
    <div style="background-image:url(banners/2.jpg)"></div>
    <div style="background-image:url(banners/3.jpg)"></div>
</div>

在应用Cycle之前，当调整浏览器窗口大小时，页面的行为完全符合预期：http://30daysoffalafel.com/test/index-nojs.html

应用循环后，当调整浏览器大小时，背景图像不会保持居中。刷新浏览器可以解决问题。 http://30daysoffalafel.com/test/

<script>
    $(document).ready(function() {
    $('.banner_images').cycle({
            fx: 'fade',
            pager: '.banner_controls div'
        });
    });
</script>

有关如何更改行为以使图像背景以浏览器为中心的任何想法在应用循环后以相同的方式调整大小？我宁愿不在窗口调整大小时添加js来刷新。

提前感谢您提出任何建议。

Answer 1

尝试

$('.banner_images').cycle({
    fx: 'fade',
    pager: '.banner_controls div',
    fit: 1,
    width: '100%',
    slideResize: true,
    containerResize: false
});

jQuery Cycle插件：在调整浏览器大小时居中背景图像

1 个答案: