是否有可能使用拖動滑塊在jQuery中的4個圖像之間滑動？

我有4個圖像和一個滑塊：是否有可能使用拖動滑塊在jQuery中的4個圖像之間滑動？

[image1.jpg]----[image2.jpg]----[image3.jpg]----[image4.jpg] 
-----------------------------[Slider]-----------------------

是否可以點擊並拖動滑塊，這樣，當它是位置1和2之間，圖像1和2被設置爲50％的透明度，然後當滑塊到達位置2時，圖像2爲100％不透明，圖像1爲100％透明。然後當從位置2滑動到3時，圖像2變爲90％，圖像3 10％，下一位置圖像2 80％圖像3 20％等...直到滑塊位於位置3並且圖像3完全可見並且圖像2是100％透明的。

這可能嗎？我會使用數組，還是獲取滑塊的X位置並相應地調整圖像透明度？

來源

2012-08-31 GT22

這絕對有可能。你可以做一個jsFiddle嗎？這需要實驗！ –

這裏是可拖動的圖像滑塊插件; [皇家滑塊]（http://dimsemenov.com/plugins/royal-slider/） –

這是我的嘗試：little link。它使用jQuery，但沒有插件（我相信它也可以用普通的JavaScript編寫）。

的代碼是相當自我解釋，但這裏的JavaScript部分的註釋版本：

$(".slider").scroll(function() { 
    var imgs = $(".slider img"); //find all images in the slider 
    imgs.each(function() { //for each of them 
     var cur = $(this); //save the current image in cur 
     var lft = cur.offset().left; //find out its left offset 
     if(lft <= 0) { //if it's been scrolled past (its offset is negative) 
      cur.css({opacity: Math.max(0, (300 + lft)/300)}); //then set its opacity to a value proportional to its left offset 
     } 
     else { 
      cur.css({opacity: Math.min(1, (500 - lft)/500)}); //it's not scrolled past yet; set its opacity appropriately 
     } 
    }); 
});

我希望幫助！

來源

2012-08-31 09:45:26 Chris

這是完美的謝謝你！我只需要安排圖像，讓它們現在處於彼此之上。謝謝！ :) – GT22

@ GT22如果它爲你工作，不要忘了點擊這個答案旁邊的綠色勾號，將其標記爲已接受！ – Chris

它的確如此，但我無法讓圖像坐在彼此之上，所以我還沒有接受它。我會繼續玩Z指數來看看我能想出什麼。感謝您一直以來的幫助！ :) – GT22

退房jQuery UI slider，它有很多的功能，包括滑動雖然（的div）圖像

來源

2012-08-31 09:14:54

這絕對是100％，可能與UI滑塊。我會看看jQuery的UI滑塊。下面是他們如何使用它不斷改變顏色的例子：

Slider Demo

而不同，一般的想法是一樣的 - 作爲滑塊的值發生變化，你只需要調整的圖像的不透明度。我認爲後者的想法（「獲得滑塊的X位置並相應地調整圖像透明度？」）是解決問題的一個非常好的方法。您可以將其設置爲使image1中的0爲100％，對於image2中的25爲100％，依此類推。如果您需要更多幫助braintstorming，請告訴我們：]

來源

2012-08-31 09:20:38 aug

是否有可能使用拖動滑塊在jQuery中的4個圖像之間滑動？

回答

相關問題