Question

我试图在页面上有3个视差背景图像似乎工作正常，但我还需要让它们具有旋转木马效果，所以我使用bxslider和视差码。

第一张幻灯片显示（虽然它没有显示为100％宽度），但滑块中的其他两张图片不显示。

这是我使用的风格：

.parallax {
background-size:cover;
min-height:1224px;
overflow:auto;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;}

这是html：

<div id="carousel">
<ul class="bxslider">                 
    <li class="parallax" style="background-image:url(images/test2.jpg);">

        <div class="parallax" style="border: 1px solid red; background-image:url(images/test2.jpg);">...</div>

    </li>
    <li class="parallax" style="background-image:url(images/test2.jpg);">

        <div class="parallax" style="border: 1px solid red; background-image:url(images/test2.jpg);">...</div>

    </li>      
    <li class="parallax" style="background-image:url(images/test2.jpg);">

        <div class="parallax" style="border: 1px solid red; background-image:url(images/test2.jpg);">...</div>

    </li>
</ul>

我不确定是否允许链接，但我可以在此处查看我正在处理的页面：http://ldswebsites.co.uk/intone/test.html

它似乎是背景附件：固定是造成问题的原因，因为当我把旋转木马上的图像显示出来时，它会失去对其余图像的视差效果。有没有其他方法可以做到这一点？

提前致谢：）

Answer 1

作者没有发表答案所以为了解决这个问题，我删除了后台附件：已修复，因为它存在问题并且我添加了一个函数来模拟视差图像。

function parallax(){
    var scrolled = $(window).scrollTop();
    $('myBxSlider li').css('background-position',"0 "+  (scrolled * 1) + 'px');
}
$(window).scroll(function(){
    parallax();
});

我从此链接复制了此代码：https://www.sitepoint.com/community/t/translate-3d-fixed-background-on-slick-slide/244637/7
答案由 RyanReese

发布

使用bxslider / jQuery制作视差背景图像

1 个答案: