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

列印頁面