使視差背景圖像與bxslider/jQuery工作

我想在一個頁面上有3個視差背景圖像似乎工作正常，但我也需要讓他們有旋轉木馬效果，所以我使用bxslider與視差碼。使視差背景圖像與bxslider/jQuery工作

第一張幻燈片顯示出來（儘管它沒有以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

它似乎是背景附件：固定是什麼導致的問題，因爲當我把它在旋轉木馬上的圖像顯示出來，但它失去了其他圖像的視差效果。有沒有其他方法可以做到這一點？

感謝提前:)

來源

2016-08-29 Emma

對不起，我設法解決我遇到的問題。不知道這個問題是否可以刪除或不是:) – Emma

不要刪除你的問題，發表一個解釋你的解決方案的答案，我想知道你是如何做到的。 – zer00ne

筆者沒有張貼他的回答
因此，要解決這個問題，我去除背景附件：固定，因爲它是cousing問題
和我增加了功能來模擬視差圖像。

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

來源

2017-09-13 23:13:45

使視差背景圖像與bxslider/jQuery工作

回答

相關問題