Question

我想用滑块制作图像。在滚动滑块图像时更改。怎么办呢？

与此链接上的Project Update类似： https://www.belgradewaterfront.com/en/register-for-belgrade-waterfront-residences/

请参阅此JSFiddle http://jsfiddle.net/yFnwD/33/

$(".scroll-img-wrap").hide();

$（＆＃34; .scroll-IMG缠绕：首先＆＃34）。显示（）; $（＆＃34; .slider＆＃34;）.slider（{ 动画：真的，范围：＆＃34; min＆＃34;，值：0， min：0， max：$（＆＃34; .scroll-img-wrap＆＃34;）。length - 1，步骤：1，

    slide: function( event, ui ) {
        $(".scroll-img-wrap").hide();
        $(".scroll-img-wrap:eq("+ui.value+")").show();
    },
    change: function(event, ui) {       
    }

});

滑块必须位于图像上方。

Answer 1

您没有详细解释您的问题，但我可能知道您想要做什么。

这就是我的做法。

首先为您想要的每个图像创建一个div作为滑块

<div class="pic1">

</div>
<div class="pic2">

</div>
<div class="pic3">

</div>

接下来，您将希望使用css将它们作为背景。

.pic1{
  background:url(../images/background4.jpg) no-repeat center center fixed;
  height:100vh;
}

然后最后你将使用jQuery在你的pic类上制作样式效果

$(document).scroll(function(){
if($(this).scrollTop() > 600){
  $('.pic1').fadeIn();
}

}）;

使用滑块创建图库

1 个答案: