2013-09-21 30 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