Orbit

JavaScript Motion UI

一个支持动画并具有许多自定义选项的图片和内容轮播图。

基础

Orbit 不会自动为您生成任何 HTML，这使您可以灵活地移动插件的各个部分。这是一个完整的示例 - 我们将在后面分解各个部分。

请注意，除了 Javascript 之外，Motion UI 也是 Orbit 正常工作的依赖项。如果您不想在轮播图中使用任何动画，则可以随时禁用动画。

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
  <div class="orbit-wrapper">
    <div class="orbit-controls">
      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
      <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
    </div>
    <ul class="orbit-container">
      <li class="is-active orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
          <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://placehold.it/1200x600/888?text=Slide-2" alt="Space">
          <figcaption class="orbit-caption">Lets Rocket!</figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://placehold.it/1200x600/777?text=Slide-3" alt="Space">
          <figcaption class="orbit-caption">Encapsulating</figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://placehold.it/1200x600/666&text=Slide-4" alt="Space">
          <figcaption class="orbit-caption">Outta This World</figcaption>
        </figure>
      </li>
    </ul>
  </div>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0">
      <span class="show-for-sr">First slide details.</span>
      <span class="show-for-sr" data-slide-active-label>Current Slide</span>
    </button>
    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
    <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
  </nav>
</div>

太空，最后的边疆。
让我们火箭起飞！
封装
走出这个世界

包装器

包装器包含整个轮播图。我们使用 aria-label 属性来标记轮播图的内容，以便辅助技术使用。

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
</div>

幻灯片容器

幻灯片容器包含每个单独的幻灯片。在我们上面的标记示例中，我们还将按钮放在此处，以便我们可以将它们锚定到幻灯片容器的中心边缘。但是，它们可以移动到 data-orbit 包装器内的任何位置。

每张幻灯片都是一个带有 .orbit-slide 类的 <li>。第一张幻灯片标记有 .is-active 类，表示它是默认幻灯片。您可以在幻灯片中放置任何您想要的 HTML，但我们为包含标题的基于图像的幻灯片准备了一些预制样式。

<ul class="orbit-container">
  <li class="orbit-slide is-active">
    <figure class="orbit-figure">
      <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
      <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
    </figure>
  </li>
  <!-- More slides... -->
</ul>

上一张/下一张箭头

Orbit 控件使用 .orbit-previous 和 .orbit-next 类。以下示例有一个重要的辅助功能挂钩：由于我们对轮播图控件使用 ASCII 箭头，因此我们添加了仅限屏幕阅读器读取的文本（包装在 .show-for-sr 类中），用于解释控件的功能。

<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span> &#9664;&#xFE0E;</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span> &#9654;&#xFE0E;</button>

项目符号

项目符号有两个用途：标记当前幻灯片，以及可以通过单击导航到另一张幻灯片。与控件一样，项目符号也可以具有方便屏幕阅读器的标签。

<nav class="orbit-bullets">
  <button class="is-active" data-slide="0">
    <span class="show-for-sr">First slide details.</span>
    <span class="show-for-sr" data-slide-active-label>Current Slide</span>
  </button>
  <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
  <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
  <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>

幻灯片内容

轮播图幻灯片可以包含图像或 HTML - 您甚至可以在一个轮播图中混合使用不同类型的幻灯片！

在视频中观看此部分

<li class="orbit-slide">
  <div>
    <h3 class="text-center">2: You can also throw some text in here!</h3>
    <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
    <h3 class="text-center">This Orbit slider does not use animations.</h3>
  </div>
</li>

这是道奇蓝。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
这是瑞贝卡紫。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
这是深金黄色。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
这是浅海绿色。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

使用动画

Orbit 使用 Motion UI CSS 类来为幻灯片添加动画。

如果您的模板中未包含 `motion-ui` [Motion UI](motion-ui.html) CSS 文件，则 Orbit 滑块将无法正常工作。

您可以设置四个插件选项来更改默认效果

data-anim-in-from-left：幻灯片从*左侧进入*时播放的过渡效果。
data-anim-in-from-right：幻灯片从*右侧进入*时播放的过渡效果。
data-anim-out-to-left：幻灯片*向左滑出*时播放的过渡效果。
data-anim-out-to-right：幻灯片*向右滑出*时播放的过渡效果。

由于这些选项名称非常*长*，您也可以使用 data-options 在一个 HTML 属性中设置所有选项

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
</div>

太空，最后的边疆。
让我们火箭起飞！
封装
走出这个世界

禁用动画

要禁用 Motion UI，请将插件选项 useMUI 设置为 false。写成 HTML 属性，即 data-use-m-u-i="false"。

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false">
</div>

太空，最后的边疆。
让我们火箭起飞！
封装
走出这个世界

Sass 参考

变量

可以使用项目设置文件中的这些 Sass 变量来自定义此组件的默认样式。

名称	类型	默认值	描述
`$orbit-bullet-background`	颜色	`$medium-gray`	Orbit 项目符号的默认颜色。
`$orbit-bullet-background-active`	颜色	`$dark-gray`	Orbit 项目符号的默认活动颜色。
`$orbit-bullet-diameter`	数字	`1.2rem`	Orbit 项目符号的默认直径。
`$orbit-bullet-margin`	数字	`0.1rem`	Orbit 项目符号之间的默认边距。
`$orbit-bullet-margin-top`	数字	`0.8rem`	Orbit 项目符号与幻灯片区域的默认距离。
`$orbit-bullet-margin-bottom`	数字	`0.8rem`	Orbit 项目符号与其下方可能存在的任何内容之间的默认底部边距。
`$orbit-caption-background`	颜色	`rgba($black, 0.5)`	Orbit 标题的默认背景颜色。
`$orbit-caption-padding`	数字	`1rem`	Orbit 标题的默认填充。
`$orbit-control-background-hover`	颜色	`rgba($black, 0.5)`	Orbit 控件悬停时的默认背景颜色。
`$orbit-control-padding`	数字	`1rem`	Orbit 控件的默认填充。
`$orbit-control-zindex`	数字	`10`	Orbit 控件的默认 z 索引。

混合宏

我们使用这些混合宏来构建此组件的最终 CSS 输出。您可以自己使用这些混合宏来从我们的组件中构建自己的类结构。

orbit-wrapper

@include orbit-wrapper;

为外部 Orbit 包装器添加样式。这些样式用于 .orbit 类。

orbit-container

@include orbit-container;

为内部 Orbit 幻灯片容器添加样式。这些样式用于 .orbit-container 类。

orbit-slide

@include orbit-slide;

为 Orbit 滑块中的各个幻灯片添加样式。这些样式用于 .orbit-slide 类。

orbit-image

@include orbit-image;

为包含图像的幻灯片添加样式。这些样式用于 .orbit-image 类。

orbit-caption

@include orbit-caption;

为 orbit 幻灯片标题添加样式。这些样式用于 .orbit-caption 类。

orbit-control

@include orbit-control;

为 Orbit 滑块中的上一张/下一张按钮添加基本样式。这些样式在默认 CSS 中由 .orbit-next 和 .orbit-previous 类共享。

orbit-previous

@include orbit-previous;

为 Orbit 上一张按钮添加样式。这些样式用于 .orbit-previous 类。

orbit-next

@include orbit-next;

为 Orbit 下一张按钮添加样式。这些样式用于 .orbit-next 类。

轨道式项目符号

@include orbit-bullets;

为 Orbit 项目符号容器添加样式。为 Orbit 上一个按钮添加样式。这些样式用于 .orbit-bullets 类。

JavaScript 参考

初始化

您的 JavaScript 中必须包含以下文件才能使用此插件

foundation.core.js
foundation.orbit.js
- 使用实用程序库 foundation.util.keyboard.js
- 使用实用程序库 foundation.util.motion.js
- 使用实用程序库 foundation.util.timer.js
- 使用实用程序库 foundation.util.imageLoader.js
- 使用实用程序库 foundation.util.touch.js

Foundation.Orbit

创建 Orbit 轮播的新实例。

var elem = new Foundation.Orbit(element, options);

名称	类型	描述
`element`	jQuery	要转换为 Orbit 轮播的 jQuery 对象。
`options`	对象	覆盖默认插件设置。

插件选项

使用这些选项来自定义 Orbit 的实例。插件选项可以设置为单个数据属性、一个组合的 data-options 属性，或者作为传递给插件构造函数的对象。了解有关如何初始化 JavaScript 插件的更多信息。

名称	类型	默认	描述
`data-bullets`	`布尔值`	`true`	告诉 JS 查找和加载项目符号。
`data-nav-buttons`	`布尔值`	`true`	告诉 JS 将事件侦听器应用于导航按钮
`data-anim-in-from-right`	`字符串`	`slide-in-right`	要应用的 motion-ui 动画类
`data-anim-out-to-right`	`字符串`	`slide-out-right`	要应用的 motion-ui 动画类
`data-anim-in-from-left`	`字符串`	`slide-in-left`	要应用的 motion-ui 动画类
`data-anim-out-to-left`	`字符串`	`slide-out-left`	要应用的 motion-ui 动画类
`data-auto-play`	`布尔值`	`true`	允许 Orbit 在页面加载时自动进行动画处理。
`data-timer-delay`	`数字`	`5000`	幻灯片过渡之间的时间量（以毫秒为单位）
`data-infinite-wrap`	`布尔值`	`true`	允许 Orbit 无限循环播放幻灯片
`data-swipe`	`布尔值`	`true`	允许 Orbit 幻灯片绑定到移动设备的滑动事件，需要额外的实用程序库
`data-pause-on-hover`	`布尔值`	`true`	允许计时函数在悬停时暂停动画。
`data-accessible`	`布尔值`	`true`	允许 Orbit 将键盘事件绑定到滑块，以使用箭头键为帧设置动画
`data-container-class`	`字符串`	`orbit-container`	应用于 Orbit 容器的类
`data-slide-class`	`字符串`	`orbit-slide`	应用于单个幻灯片的类。
`data-box-of-bullets`	`字符串`	`orbit-bullets`	应用于项目符号容器的类。不客气。
`data-next-class`	`字符串`	`orbit-next`	应用于“下一个”导航按钮的类。
`data-prev-class`	`字符串`	`orbit-previous`	应用于“上一个”导航按钮的类。
`data-use-m-u-i`	`布尔值`	`true`	布尔值，用于标记 js 是否使用 motion ui 类。默认为 true 以实现向后兼容性。

事件

这些事件将从任何附加了 Orbit 插件的元素触发。

名称	描述
`beforeslidechange.zf.orbit`	在下一张幻灯片开始动画化之前触发，并且仅在找到下一张幻灯片时触发。
`slidechange.zf.orbit`	在幻灯片动画化完成后触发。

方法

geoSync

$('#element').foundation('geoSync');

在轨道上设置 timer 对象，并启动下一张幻灯片的计数器。

_reset

$('#element').foundation('_reset');

重置 Orbit，以便可以对其进行重新初始化

changeSlide

$('#element').foundation('changeSlide', isLTR, chosenSlide, idx);

将当前幻灯片更改为新幻灯片。

触发以下事件： Orbit#event:slidechange

名称	类型	描述
`isLTR`	布尔值	如果为 true，则幻灯片从右向左移动，如果为 false，则幻灯片从左向右移动。
`chosenSlide`	jQuery	要显示的下一张幻灯片的 jQuery 元素（如果已选择）。
`idx`	数字	新幻灯片在其集合中的索引（如果已选择）。

_destroy

$('#element').foundation('_destroy');

销毁轮播并隐藏元素。