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

【问题标题】：Making parallax background images work with bxslider / jQuery使用 bxslider / jQuery 制作视差背景图像
【发布时间】：2016-08-29 10:03:12
【问题描述】：

我正在尝试在一个页面上添加 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

似乎是背景附件：已修复是导致问题的原因，因为当我将其取出时，轮播上的图像会显示出来，但它会失去其余图像的视差效果。有没有其他方法可以做到这一点？

提前致谢:)

【问题讨论】：

抱歉，我设法解决了我遇到的问题。不知道这个问题能不能删:)
不要删除你的问题，发布一个解释你的解决方案的答案，我想知道你是怎么做到的。

标签： javascript jquery css parallax bxslider

【解决方案1】：

作者没有发布他的答案
所以为了解决这个问题，我删除了 background-attachment:fixed，因为它会引起问题
我添加了一个函数来模拟视差图像。

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

发布的答案

【讨论】：