javascript - Google Play 英雄 slider ?

标签 javascript jquery html css

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

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

最佳答案

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

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

你想知道的事情:

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

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

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

关于javascript - Google Play 英雄 slider ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13734033/

相关文章:

javascript - 获取javascript中innerHTML为动态值的下一个子元素

javascript - 如何在 Nativescript 中实现 Java 方法?

javascript - 在 Javascript 中组合两个或多个数组

jquery - jQuery 无法识别 CSS 伪代码

javascript - 如何更改 css 下拉列表以根据文本大小更改大小?

javascript - Ember.js RC1 获取路由名称

javascript - 单击任何 "a"标记时,如何使单击处理程序处理,而不管它被包裹在什么周围?

html - 如果我包含 Nav 标签,Chrome 屏幕上不会显示任何其他内容

html - 如何创建 'responsive' 列表 : creating multiple columns to fit available width?

html - 在下面的代码中添加代码以显示图像