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

时间:2016-08-29 10:03:13

标签: javascript jquery css parallax bxslider

我试图在页面上有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

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

提前致谢:)

1 个答案:

答案 0 :(得分: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

发布