製作帶滑動條的圖片庫

Question

我想用滑塊條製作圖片。在滾動瀏覽滑塊圖像時發生變化。如何做呢？

類似的東西，以項目更新此鏈接： https://www.belgradewaterfront.com/en/register-for-belgrade-waterfront-residences/

看到這個的jsfiddle http://jsfiddle.net/yFnwD/33/

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

$：顯示（）;（ 「上滾動IMG-包第一」）。 $（ 「.slider」）.slider（{ 動畫：真， 範圍： 「min」 是， 值：0， 分鐘：0， 最大： 「滾動-IMG纏繞」 $（）的長度。 - 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(); 
} 

}）;