Foundation - Media JavaScript 参考

描述

Foundation 提供了如下所示的 Orbit JavaScript 组件。

要使用 Orbit 插件，应在 JavaScript 中包含 foundation.core.js 和 foundation.orbit.js 文件。此插件需要以下实用程序库：

用于创建 Orbit 轮播的新实例。

var elem = new Foundation.Orbit(element);

序号	名称及描述	类型
1	element 要转换为轮播的 jQuery 对象。	jQuery
2	options 覆盖插件的默认设置。	对象

序号

名称及描述

类型

element

要转换为轮播的 jQuery 对象。

jQuery

options

覆盖插件的默认设置。

对象

您可以使用这些选项来自定义 Orbit 实例。可以将其设置为单独的数据属性、一个合并的 data-options 属性或作为传递给插件构造函数的对象。下表列出了 Foundation 中使用的插件选项。

序号	名称及描述	示例
1	bullets 指示 JS 加载指示点。	true
2	navButtons 指示 JS 为导航按钮添加事件监听器。	true
3	animInFromRight 要应用的 motion-ui 动画类。	'slide-in-right'
4	animOutToRight 要应用的 motion-ui 动画类。	'slide-out-right'
5	animInFromLeft 要应用的 motion-ui 动画类。	'slide-in-left'
6	animOutToLeft 要应用的 motion-ui 动画类。	'slide-out-left'
7	autoPlay 允许 Orbit 在页面加载时自动播放动画。	true
8	timerDelay 表示将应用于幻灯片过渡的时间（毫秒）。	5000
9	infiniteWrap 无限循环幻灯片。	true
10	swipe 允许 Orbit 幻灯片绑定移动设备的滑动事件。	true
11	pauseOnHover 允许计时函数在悬停时暂停动画。	true
12	accessible 将键盘事件绑定到滑块。	true
13	containerClass 应用于 Orbit 容器的类。	'orbit-container'
14	slideClass 应用于 Orbit 各个幻灯片的类。	'orbit-slide'
15	boxOfBullets 应用于指示点容器的类。	'orbit-bullets'
16	nextClass 应用于下一个按钮的类。	'orbit-next'
17	prevClass 应用于上一个按钮的类	'orbit-previous'
18	useMUI 将其设置为布尔值以指示 JS 是否使用 motion ui 类。为了向后兼容性，默认为 true。	true

这些事件将从附加了插件的任何元素触发。当幻灯片动画完成时，将触发 slidechange.zf.orbit 事件。

.geoSync 设置一个 timer 对象并启动下一个幻灯片的计数器。

将其更改为新的幻灯片。它会触发 Orbit#event 事件以进行幻灯片更改。下表列出了将触发的事件。

序号	名称及描述	类型
1	isLTR 当幻灯片必须从左向右移动时，它会设置标志。	布尔值
2	chosenSlide 选择时要显示的下一个幻灯片的 jQuery 元素。	jQuery
3	idx 选择时，它表示其集合中新的幻灯片索引。	数字

序号

名称及描述

类型

isLTR

当幻灯片必须从左向右移动时，它会设置标志。

布尔值

chosenSlide

选择时要显示的下一个幻灯片的 jQuery 元素。

jQuery

idx

选择时，它表示其集合中新的幻灯片索引。

数字

.destroy 会销毁轮播并隐藏元素。

foundation_media.htm

打印页面