jQuery Tools tab(投影片)_jquery

html

複製程式碼程式碼如下：

; >




href="./tabs-slideshow.css "/>
頭>

prev

;

第一窗格

Aenean nec imperdiet ligula。 Cum sociis natoque penatibus et
magnis dis parurient montes, nascetur rodiculus mus。

暫停效力。 Sed elementum risus eleifend Massa
vestibulum consectetur。 Duis Massa augue、aliquam eget fringilla
vel、aliquam vitae arcu。 Nam sed magna mi。 Praesent odio neque，
dapibus sat amet suscipit at，tempus sed nibh。 Aliquam sagittis
ligula in ligula faucibus cursus。 Quisque vulputate pellentesque
facilisis。

;

第二個窗格

Consectetur adipiscing elit。 Praesent bibendum eros ac
nulla。整數 vel lacus ac neque viverra。

Vivamus euismod euismod sagittis。 Etiam cursus neque non lectus
mattis cursus et a libero。 Vivamus condimentum hendrerit metus，
a sollicitudin magna vulputate eu。 Donec sed Tincidunt
lectus。 Donec Tellus lectus，發酵坐 amet porta non，
rhoncus ac mi。 Quisque placerat auctor justo，一個 Egestas urna
tincidunt eleifend。

;

第三個窗格

非lectus lacinia egestas。 Nulla hendrerit, felis quis
elementum viverra, purus felis egestas magna。

Aenean elit lorem，pretium v​​itae dictum in，fermentum consequat
dolor。 Proin consectetur sollicitudin Tellus, non elementum
turpis pharetra non. Sed quistellus quam。

下一個

播放;
停止;

$( function() {
$(".slidetabs").tabs(".images > div", {
//啟用「交叉淡入淡出」效果
effect: 'fade ',
fadeOutSpeed : "slow",
// 從最後一個選項卡後開始
rotate: true
// 使用幻燈片外掛程式它接受自己的設定
}) .slideshow();
});
腳本>
身體>

css

複製代碼代碼如下：

/* 幻燈片容器*/
.images {
background:#fff Repeat-x;
邊框：1px實線#ccc；
位置：親屬；
高度：300px;
寬度：560px;
浮動：左；
邊距：15px;
遊​​標：指針；
/* 針對現代瀏覽器的CSS3 調整*/ -moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow:0 0 25px #666;
-webkit-box-shadow:0 0 25px #666;
}
/* 單張幻燈片*/
.images div {
display:none;
位置：絕對；
頂部：0；
左：0；
邊距：7px;
內邊距：15px 30px 15px 15px;
高度：256px;
字體大小：12px;
}
}
* 標題* 標題* 標題* /
.images h3 {
font-size:22px;
字體粗細：正常；
邊距：0 0 20px 0;
顏色：#456；
}
}
/* 選項卡（幻燈片下方的小圓圈）*/
.slidetabs {
clear:both;
左邊距：310px;
}
/* 單選項卡*/
.slidetabs a {
width:8px;
高度：8px;
浮動：左；
邊距：3px;
背景：url(./navigator.png) 0 0 無重複；
顯示：塊；
字體大小：1px；
}
/* 老鼠懸停狀態*/
.slidetabs a:hover {
background-position: 0 -8px;
}
/* 活動狀態（目前頁面狀態） */
.slidetabs a.current {
background-position:0 -16px;
}
/ * 上一個和下一個按鈕*/
.forward, .backward {
float:left;
頂部邊距：140px;
背景：#fff url(./hori_large.png) 不重複；
顯示：區塊；
寬度：30px;
高度：30px;
遊​​標：指標；
字體大小：1px;
文字縮排：-9999em
}
/* 下一個*/
.forward { 背景位置：0 -30px;明確：正確; }
.forward:hover { 背景位置:-30px -30px; }
. forward:active { 背景位置:-60px -30px; }
/* 上一個*/
.backward:hover { 背景位置:-30px 0; }
.backward:active { 背景位置:- 60px 0; }
/* 停用導航按鈕。當選項卡
配置旋轉時不需要：true */
.disabled {
visibility:hidden !important;

}

PS：佔用一些圖片

實例js 複製代碼

代碼如下：



代碼如下：



代碼如下：



代碼如下：
(function() {

$(".slidetabs").tabs(".images > div", { //啟用「交叉淡入淡出」效果effect: 'fade', fadeOutSpeed: "slow", next:'.forward', prev:'.backward', // 從最後一個tab 之後從頭開始rotate: true / / 使用幻燈片外掛程式。
這個同html中的js
•配置
配置選項的完整清單的幻燈片外掛程式。
作為建立多個選項卡的實例。 disabledClass<span id="OUTFOX_JTR_TRANS_NODE-70" class="OUTFOX_JTR_TRANS_NODE">3000</span><td> <code><span id="OUTFOX_JTR_TRANS_NODE-70" class="OUTFOX_JTR_TRANS_NODE">3000</span>

屬性	預設值	描述
next	'.forward'	選擇器進行的元素的「下一個選項卡」行動應該 綁定。 如果您實例化多個投影片在相同的頁面上 你需要附上所有投影片元素(標籤/窗格/下 &上一頁動作)在一個共同的包裝器元素。 這個邏輯 遵循 相同的原則 作為建立 多個選項卡的實例。 prev
prev	<span id="OUTFOX_JTR_TRANS_NODE-44" class="OUTFOX_JTR_TRANS_NODE"><code><span id="OUTFOX_JTR_TRANS_NODE-44" class="OUTFOX_JTR_TRANS_NODE"><span>'.backward'</span></span>'.backward'	選擇器的兄弟元素「之前的選項卡」 動作應該綁定。 如果您實例化多個投影片 與相同的電話,你需要附上所有投影片元素 (標籤/窗格/下&上一頁動作)在一個共同的包裝器 元素。 這個邏輯遵循 相同 原則
	'disabled'	CSS類別名稱'disabled'上一頁 和 元素。 例如, 這個 上一頁 元素是當沒有'disabled'的 前面提及的捲軸。
autoplay	false	如果這個屬性設定為 真正的 然後選項卡將自動前進到下一個選項卡實現自動「玩」的幻燈片。 這是方便 使 旋轉 屬性標籤。
autopause	true	如果這個屬性設定為 真正的 ,當未來/上一頁選項卡操作按鈕是mouseovered然後autoplay  功能將會暫停。
interval	時間(以毫秒為單位)自動走到之間 選項卡。 只有這個選項是有效的 自動播放 是啟用或 autoplayautoplayautoplay 🎜>方法被呼叫。
clickable	true	當設定為 真正的 然後選項卡將自動 推進到下一個標籤透過點選可見的窗格。

JavaScript API

方法	返回值	描述/例子
getconf	Object	自从1.2.0 。 返回配置对象 对于这个插件
getTabs	Tabs	自从1.2.0 。 返回一个引用 这个 标签API 。
play	<span id="OUTFOX_JTR_TRANS_NODE-96" class="OUTFOX_JTR_TRANS_NODE">API</span>	开始播放幻灯片。
pause	<span id="OUTFOX_JTR_TRANS_NODE-99" class="OUTFOX_JTR_TRANS_NODE">API</span>	暂停幻灯片。 回放将恢复鼠标脱离了标签,窗格和导航按钮。
stop	<span id="OUTFOX_JTR_TRANS_NODE-102" class="OUTFOX_JTR_TRANS_NODE">API</span>	停止幻灯片。 这只能通过调用恢复 这个 play 方法。

方法 傳回值

描述/範例

getconf Object 自從1.2.0 

事件	触发时间
onBeforePlay	开始之前播放。 返回 false 在 回调防止回放开始。
onPlay	当回放开始。
onBeforePause	在播放暂停。 返回 false  在 回调防止回放开始。
onPause	当播放暂停。

getTabs Tabs 自從1.2.0 標籤API  play <span id="OUTFOX_JTR_TRANS_NODE-96" class="OUTFOX_JTR_TRANS_NODE">API</span> 開始播放投影片。 pause <span id="OUTFOX_JTR_TRANS_NODE-99" class="OUTFOX_JTR_TRANS_NODE">API</span> 暫停投影片。 回放將恢復滑鼠脫離了標籤,窗格和導航按鈕。 stop <span id="OUTFOX_JTR_TRANS_NODE-102" class="OUTFOX_JTR_TRANS_NODE">API</span> 停止投影片。 這只能透過呼叫恢復 這個 play 方法。 事件 確保你已經閱讀 大約 事件 jQuery工具 。 所有事件監聽器接收 這個 事件 物件 作為第一個參數。 onBeforePlay 開始之前播放。 返回 false 在 回調防止回放開始。 onPlay 當回放開始。 onBeforePause 在播放暫停。 回 false o FOX_JTR_TRANS_NODE>在回調防止回放開始。 onPause 當播放暫停。

事件	觸發時間