我试图在页面上有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
它似乎是背景附件:固定是造成问题的原因,因为当我把旋转木马上的图像显示出来时,它会失去对其余图像的视差效果。有没有其他方法可以做到这一点?
提前致谢:)
答案 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