多图像滑块

Question

Apple的iMac页面上有一个惊人的滑块。

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

任何人都有一个教程链接，解释了这是如何完成的？效果有一些严重的惊人因素。

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

Answer 1

关于滑块的说明：

• 使用插件系统。有许多强大的系统。如果您使用的是jQuery，我推荐使用cycle plugin。它非常可定制。
• 底部的导航圈都使用精灵（表示one image.）然后他们使用background-position一次显示图片的正确部分。
• 使用视觉空白。 Apple的滑块看起来很好的一个原因是因为元素没有局限。他们有很大的呼吸空间。

关于上一张/下一张图片的说明：

• 将<a>放在一边，并将实际内容包装在另一个标记中。 Apple为此使用了<b>。我可能会使用<span>。使用opacity使其不可见。
• <a>标记需要覆盖大面积区域。您可能希望将其设置为容器高度的100％，并且宽度足以让鼠标找到它。
• 内部代码包含您要显示的文字或图片。 Apple为文字撰写next，但之后使用background-image并将文字移出屏幕text-indent。
• 当您将鼠标悬停在<a>上时，可以看到内部标记。再次，您将使用opacity。
• 使用CSS3过渡进行淡入/淡出。做一些谷歌搜索以了解有关它们的更多信息。
• 使用JavaScript确定是否应显示<a>。这是许多幻灯片插件的内置功能。如果您使用的是jQuery，我建议使用cycle plugin。

---

/*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