2013-09-21 38 views
0

我對HTML,CSS,Javascript和JQuery非常熟悉,我怎樣才能在他們的網站上獲得這個驚人的幻燈片,當幻燈片上的主要元素從側面(元素意味着圖片)進入時,背景將會消失。我該如何實現這個驚人的幻燈片?

網站:http://www.scorpiondesign.com/

+0

那麼不要發出聲音太令人難以置信的沉悶控制,但這需要一定的努力和精心設計的編程PNG格式。通過查看頁面我可以看出,他們在背景上疊加了三層或更多透明圖像。當選項卡更改後,背景將淡入下一張幻燈片,並且透明圖像全部以不同的速度移動。我不知道你在哪裏可以找到一個圖書館來提供這個,但有一些努力,你可以把它從你自己! – rfoo

+0

如果您使用的是谷歌瀏覽器,您可以使用Inspect Element來觀看這個真棒幻燈片。 – rfoo

回答

1

如果你也願意和使用jQueryUI的效果,那麼你可以很容易地做到這一點,你需要在每個幻燈片你想要PNG圖像和任何HTML和有幻燈片顯示設置爲無,外滑動器必須overflow屬性爲隱藏,現在你可以滑動使用圖像簡單:

$(".thumb1").click(function(){ 
    $('#slide1').show('slide', {direction: 'left'}, 1000);  
}); 

.thumb1是幻燈片1縮略圖,只要你想,你可以使用盡可能多的縮略圖,你就必須需要相應地修改jquery。 #slide1包含您想要滑動的所有html元素。

+0

嗯問題將幻燈片的圖像堆疊在彼此的頂部,顯示設置爲無,或者他們會在一排中彼此相鄰,幻燈片的溢出設置爲隱藏,因此您無法看到每個圖像旁邊的圖像其他? –

+0

您可以使用以下代碼隱藏現有幻燈片: $('#slide0')。hide('slide',{direction:'left'},1000); –

+0

您可以通過使用絕對定位將圖像設置爲相互之間或任何其他方式來設置樣式,並且不要忘記將容器的位置設置爲相對。 –

0

它看起來像背景淡入淡出由JavaScript控制,所有其他元素都具有透明背景的,其動畫也由JavaScript