javascript - Google Play 英雄 slider ？

Question

一位客户表示，他们非常喜欢 Google Play 处理他们的英雄 slider 的方式。我试过在 jQueryCycle 中复制效果，但无济于事。谁能阐明实现相同效果的最佳方法？

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

Answer 1

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

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

你想知道的事情:

• 使用 CSS 将绝对元素设为相对定位元素的根，这样您就可以在不影响布局的情况下将绝对面板固定在内容上。

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

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