Foundation - Media JavaScript 参考
描述
Foundation 为 orbit 提供 JavaScript 组件，如下所示。
初始化
要使用 orbit 插件，您的 JavaScript 中应包含 foundation.core.js、foundation.orbit.js 文件。此插件需要以下实用程序库 −
foundation.util.keyboard.js
foundation.util.motion.js
foundation.util.timerAndImageLoader.js
foundation.util.touch.js
Foundation.Orbit
用于创建轨道轮播的新实例。
var elem = new Foundation.Orbit(element);
| Sr.No. | 姓名 &描述 | 类型 |
|---|---|---|
| 1 |
Element 这是一个用于制作轮播的 jQuery 对象。 |
jQuery |
| 2 |
Options 它会覆盖插件的默认设置。 |
对象 |
插件选项
您可以使用它们来自定义轨道的实例。它可以设置为单独的数据属性、一个合并的 data-options 属性或作为传递给插件构造函数的对象。下表列出了 Foundation 中使用的插件选项。
| Sr.No. | 名称和描述 | 示例 |
|---|---|---|
| 1 |
项目符号 它告诉 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 它自动允许轨道在页面加载时进行动画处理。 |
true |
| 8 |
timerDelay 它表示将应用于幻灯片转换的时间(以毫秒为单位)。 |
5000 |
| 9 |
infiniteWrap 它通过无限循环幻灯片 |
true |
| 10 |
swipe 它允许轨道幻灯片绑定移动设备的滑动事件。 |
true |
| 11 |
pauseOnHover 它允许计时功能在悬停在其上时暂停动画。 |
true |
| 12 |
accessible 它将键盘事件绑定到滑块。 |
true |
| 13 |
containerClass 应用于轨道容器的类。 |
'orbit-container' |
| 14 |
slideClass 应用于轨道的各个幻灯片的类。 |
'orbit-slide' |
| 15 |
boxOfBullets 应用于项目符号容器的类。 |
'orbit-bullets' |
| 16 |
nextClass 应用于下一个按钮的类。 |
'orbit-next' |
| 17 |
prevClass 应用于上一个按钮的类 |
'orbit-previous' |
| 18 |
useMUI 它设置布尔值来标记 JS 是否使用运动 UI 类。为了向后兼容，默认为 true。 |
true |
事件
这些事件将从附加插件的任何元素触发。幻灯片完成动画时，slidechange.zf.orbit 将触发。
函数
.geoSync 设置 timer 对象并启动下一张幻灯片的计数器。
.changeSlide
它将幻灯片更改为新幻灯片。它会触发 Orbit#event 事件以进行幻灯片更改。下表列出了将触发的事件。
| Sr.No. | 名称和描述 | 类型 |
|---|---|---|
| 1 |
isLTR 当幻灯片必须从左向右移动时，它会发出标记。 |
boolean |
| 2 |
chosenSlide 当选择一个幻灯片时，显示下一个幻灯片的 jQuery 元素。 |
jQuery |
| 3 |
idx 当选择一个幻灯片时，它表示其集合中的新幻灯片索引选择。 |
数字 |
.destroy 销毁轮播并隐藏元素。
foundation_media.html
