javascript - Google Play 英雄滑块？

Question

一位客户表示，他们非常喜欢 Google Play 处理英雄滑块的方式。我尝试在 jQueryCycle 中复制效果无济于事。任何人都可以阐明实现相同效果的最佳方法吗？

对于那些不熟悉的人：https: //play.google.com/store?hl=en - 滑块显示集中的“当前滑块”以及屏幕后面显示的“上一个”和“下一个”幻灯片预览。它是连续的，你总是可以看到之前和之后。

Answer 1

它不是连续的。右边的东西不会在幻灯片之间滑动，它只是出现。它并没有为轮播设置高标准。

您真正需要的只是将任何旧轮播分成 3 段，在段 1 和 3 上永久覆盖半透明叠加层，在段 2 上打开和关闭一个。每次幻灯片完成时，隐藏 #2 叠加层。每次开始时都会再次显示。

你想知道的东西：

• 使用 CSS 将绝对元素植根到相对定位的元素，这样您就可以在内容上修复绝对面板，而不会影响布局。

• 通过 jQuery 使用回调或自定义事件。

• 如何使用 Photoshop 制作透明/半透明 .png 图像以用作面板背景。