简体繁体 English

Google Play英雄滑块？

[英]Google Play hero slider?

原文 2012-12-05 22:56:29 6 1 javascript/ jquery/ html/ css

A client has expressed that they really like how Google Play handles their hero slider. 一位客户表示，他们非常喜欢Google Play处理英雄滑块的方式。 I've tried replicating the effect in jQueryCycle to no avail. 我试过在jQueryCycle中复制效果无济于事。 Can anyone shed some light on the best way to achieve the same effect? 任何人都可以阐明达到相同效果的最佳方法吗？

For those unfamiliar: https://play.google.com/store?hl=en - the slider shows a centralized "current slider" as well as a "previous" and "next" slide preview shown behind a screen. 对于那些不熟悉的人： https : //play.google.com/store?hl= zh_CN-滑块显示集中的“当前滑块”以及在屏幕后面显示的“上一个”和“下一个”幻灯片预览。 It's continuous and you can always see a before and after. 它是连续的，您总是可以看到前后。

1 个解决方案

It's not continuous. 它不是连续的。 Stuff on the right doesn't slide in between slides, it just appears. 右侧的内容不会在幻灯片之间滑动，只会出现。 It's not exactly setting the bar high for carousels. 旋转木马的门槛并不是很高。

All you really need is any old carousel split into 3 segments with translucent overlays permanently over segments 1 and 3 and one that flips on and off over segment 2. Every time a slide completes, hide the #2 overlay. 您真正需要的是将任何旧的旋转木马分成3个部分，在第1和第3部分上永久覆盖半透明的覆盖层，然后在第2部分上进行翻转。每当幻灯片完成时，隐藏＃2覆盖层。 Every time one begins show it again. 每次开始再次显示它。

Stuff you'll want to know: 您想知道的东西：

Rooting absolute elements to relative positioned elements with CSS so you can fix absolute panels over the content stuff without affecting layout. 使用CSS将绝对元素扎根到相对定位的元素，以便您可以在内容上固定绝对面板而不会影响布局。
Using callbacks or custom events with jQuery. 在jQuery中使用回调或自定义事件。
How to make transparent/translucent .png images with Photoshop to use as panel backgrounds. 如何使用Photoshop制作透明/半透明的.png图像以用作面板背景。