搜尋
首頁web前端js教程jQuery Tools tab(投影片)_jquery

html

複製程式碼程式碼如下:

; >

jQuery 工具獨立示範


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 當播放暫停。
事件 觸發時間

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
JavaScript:探索網絡語言的多功能性JavaScript:探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

JavaScript的演變:當前的趨勢和未來前景JavaScript的演變:當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript:它的作用以及為什麼重要神秘的JavaScript:它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

Python還是JavaScript更好?Python還是JavaScript更好?Apr 06, 2025 am 12:14 AM

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。1.Python以简洁语法和丰富库生态著称,适用于数据分析和Web开发。2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

如何安裝JavaScript?如何安裝JavaScript?Apr 05, 2025 am 12:16 AM

JavaScript不需要安裝,因為它已內置於現代瀏覽器中。你只需文本編輯器和瀏覽器即可開始使用。 1)在瀏覽器環境中,通過標籤嵌入HTML文件中運行。 2)在Node.js環境中,下載並安裝Node.js後,通過命令行運行JavaScript文件。

在Quartz中如何在任務開始前發送通知?在Quartz中如何在任務開始前發送通知?Apr 04, 2025 pm 09:24 PM

如何在Quartz中提前發送任務通知在使用Quartz定時器進行任務調度時,任務的執行時間是由cron表達式設定的。現�...

在JavaScript中,如何在構造函數中獲取原型鏈上函數的參數?在JavaScript中,如何在構造函數中獲取原型鏈上函數的參數?Apr 04, 2025 pm 09:21 PM

在JavaScript中如何獲取原型鏈上函數的參數在JavaScript編程中,理解和操作原型鏈上的函數參數是常見且重要的任�...

微信小程序webview中Vue.js動態style位移失效是什麼原因?微信小程序webview中Vue.js動態style位移失效是什麼原因?Apr 04, 2025 pm 09:18 PM

在微信小程序web-view中使用Vue.js動態style位移失效的原因分析在使用Vue.js...

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具