javascript - 多图像 slider

Question

Apple 的 iMac 页面上有一个很棒的 slider 。

这是您的标准图片 slider ，但看起来它利用了一张幻灯片中不同时间出现的多张图片。

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

这是链接:http://www.apple.com/imac/

Answer 1

slider 注意事项:

• 使用插件系统。有很多强大的插件系统。如果您使用 jQuery，我推荐 cycle plugin .它是高度可定制的。
• 底部的导航圈都使用了 Sprite (表示 one image. ) 然后他们使用了 background-position一次显示图像的适当部分。
• 使用视觉空白。Apple 的 slider 看起来如此出色的原因之一是元素不拥挤。他们有很大的呼吸空间。

上一张/下一张图片注释:

• 定位 <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;