多图像滑块

Multi Image Slider

本文关键字：图像      更新时间：2023-09-26

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

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

谁有教程的链接来解释这是如何做到的?

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

笔记滑块:

  • 使用插件系统。有许多健壮的。如果您正在使用jQuery，我建议使用cycle插件。这是非常可定制的
  • 底部的导航圈都使用一个精灵(意味着一个图像)他们然后使用background-position一次显示图像的适当部分。
  • 使用可视空白。苹果的滑块看起来如此好看的一个原因是元素不拥挤。他们有很多呼吸的空间。

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

  • 将<a>放在旁边，并将实际内容包装在另一个标签中。 Apple为此使用了<b>。我可能会用<span>。使用opacity使其不可见。
  • <a>标签需要覆盖大面积。你可能想让它的容器高度的100%，并有足够的宽度鼠标找到它。
  • 内部标签包含要显示的文本或图像。 Apple为文本编写了next，但随后使用background-image并使用text-indent将文本移出屏幕。
  • 当你将鼠标悬停在<a> .上时，使内部标签可见。同样，你将使用opacity。
  • 使用CSS3过渡渐变/淡出。在谷歌上搜索一下，了解更多关于他们的信息。
  • 使用JavaScript来确定是否应该显示<a>。这是许多幻灯片插件内置的。如果你正在使用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;

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

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

相关文章：