多图像滑块

Question

苹果的 iMac 页面上有一个令人惊叹的滑块。

这是标准图像滑块，但看起来它利用了在单张幻灯片中不同时间出现的多个图像。

有人有一个教程的链接来解释这是如何完成的吗？这种效果有一些令人惊叹的因素。

链接如下：http://www.apple.com/imac/

Answer 1

滑块注意事项：

• 使用插件系统。有很多强大的插件系统。如果您使用 jQuery，我推荐cycle 插件。它是非常可定制的。
• 底部的导航圆圈都使用精灵（意味着一张图像。) 然后，他们使用 background-position 一次显示图像的适当部分。
• 使用视觉空白。 Apple 的滑块看起来如此出色的原因之一是元素并不局促。他们有很大的呼吸空间。

上一张/下一张图片的注释：

• 将 放在侧面，并将实际内容包裹在另一个标签中。 Apple 使用a 为此。我可能会使用 。使用opacity使其不可见。
• 标签需要覆盖很大的区域。您可能希望它是容器高度的 100%，并且足够宽以便鼠标能够找到它。
• 内部标签包含您将显示的文本或图像。 Apple 为文本编写了 next，但随后使用 background-image 并移动了使用text-indent将文本移出屏幕。
• 当您将鼠标悬停在 上时，使内部标记可见。为此，您将再次使用 opacity。
• 使用 CSS3 过渡效果进行淡入/淡出。进行一些 Google 搜索以了解有关它们的更多信息。
• 使用 JavaScript 来确定是否应该显示 。许多幻灯片插件都内置了此功能。如果您使用 jQuery，我推荐cycle 插件。

---

/*this will fade only the opacity property in .25 seconds for both in and out */
-webkit-transition: .25s opacity ease-out;
-moz-transition: .25s opacity ease-out;
transition: .25s opacity ease-out;

Answer 2

AnythingSlider是迄今为止我发现的最接近苹果滑块的东西。它独立地为每张幻灯片的元素设置动画。查看 FX 演示。

http://proloser.github.com/AnythingSlider/demos.html