使用滑块制作图片库

Question

我想制作带有滑块的图像。滚动滑块时，图像会发生变化。怎么办？

此链接上类似于项目更新的内容： https://www.belgradewaterfront.com/en/register-for-belgrade-waterfront-residences/

查看这个 JSFiddle http://jsfiddle.net/yFnwD/33/

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

$(".scroll-img-wrap:first").show(); $( ".slider" ).slider({ 动画：真实， 范围：“分钟”， 值：0， 分钟：0， 最大值：$(".scroll-img-wrap").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 为你的图片类制作样式效果

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

});