jQueryツールタブ(スライドショー)_jquery-jsチュートリアル-php.cn

html

jQuery ツールのスタンドアロンデモ

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

前

最初のペイン

Aenean nec imperdiet ligula。 Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus.

強力なサスペンション。 Sed elementum risus eleifend Massa
vestibulum consectetur。 Duis Massa augue、aliquam eget fringilla
vel、aliquam vitae arcu。ナムセドマグナミ。 Praesent odio neque、
dapibus sit amet suscipit at、tempus sed nibh。 Aliquam sagittis
ligula ligula faucibus cursus 。 Quisque vulputate pellentesque
ファシリシス。

2 番目のペイン

コンセクテトゥール・アディピシング・エリート。 Praesent bibendum eros ac
nulla.整数は有効です。

Vivamus euismod euismod sagittis。エティアム・クルスス・ネケ・ノン・レクトゥス
マティス・クルススらリベロ。 Vivamus condimentum hendrerit metus、
a sollicitudin magna vulputate eu。 Donec sed tincidunt
lectus。 Donec Tellus lectus、fermentum sit amet porta non、
rhoncus ac mi。 Quisque placerat auctor justo、egestas urna
tincidunt eleifend。

3 番目のペイン

非レクトゥス・ラシニア・エジェスタス。 Nulla hendrerit、felis quis
elementum viverra、purus felis egestas magna。

Aenean elit lorem、pretium vitae dictum in、fermentum consequat
dolor。 Proin consectetur sollicitudin Tellus、non elementum
turpis pharetra non。セド・キス・テルス・クアム。

次

<スクリプト言語="JavaScript">
$(function() {
$(".slidetabs").tabs(".images > div", {
// 「クロスフェード」効果を有効にする
effect: 'fade ',
fadeOutSpeed: "slow",
// 最後のタブの後に最初から開始
rotate: true
// 独自の設定を受け入れるスライドショープラグインを使用します
}) .slideshow()
});

css

复制代码代码如下:

 
/* スライドのコンテナ */ 
.images { 
background:#fffrepeat-x; 
ボーダー:1px ソリッド #ccc; 
位置:相対; 
高さ:300ピクセル; 
幅:560ピクセル; 
浮動小数点:左; 
マージン: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; 
} 
/* header */ 
.images h3 { 
font-size:22px; 
フォントの太さ:標準; 
マージン:0 0 20px 0; 
カラー:#456; 
} 
/* タブ (スライドの下の小さな円) */ 
.slidetabs { 
clear:both; 
マージン左:310px; 
} 
/* 単一タブ */ 
.slidetabs a { 
width:8px; 
高さ:8px; 
浮動小数点:左; 
マージン:3px; 
background: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; 
background:#fff url(./hori_large.png) 繰り返しなし; 
表示:ブロック; 
幅:30px; 
高さ:30px; 
カーソル:ポインタ; 
フォントサイズ:1px; 
テキストインデント:-9999em; 
} 
/* next */ 
.forward { 背景位置: 0 -30px;クリア:右; 
.forward:hover {background-position:-30px -30px; 
.forward:active {background-position:-60px -30px; } 
/* prev */ 
.backward:hover {backward-position:-30px 0; 
.backward:active {backward-position:-60px 0; } 
/* ナビゲーション ボタンが無効になりました。タブが 
rotate: true */ 
.disabled { 
visibility:hidden ! important; で設定されている場合は必要ありません。 
} 

追記：いくつかの写真を使用しました

实例js

复制代代码如下:

 
$ (function() { 
$(".slidetabs").tabs(".images > div", { 
// 「クロスフェード」効果を有効にします 
effect: 'fade', 
fadeOutSpeed: "slow", 
next:'.forward', 
prev:'.backward', 
// 最後のタブの後の先頭から開始 
rotate: true 
/ / スライドショー プラグインを使用します。独自の設定を受け入れます 
}).slideshow() 
}); 

これは HTML の同じ js です
•設定
設定オプションの完全なリストを備えたスライドショープラグイン。
前セレクターの兄弟である「前のタブ」アクションをバインドする必要があります。同じ呼び出しで複数のスライドをインスタンス化する場合は、すべてのスライド要素 (タブ/ペイン/次および前のアクション) を共通のラッパー要素で囲む必要があります。このロジックは、複数のタブを作成するインスタンスと同じ原則無効クラス自動再生自動一時停止間隔

属性	デフォルト値	説明
次	'.forward'	要素に対して「次のタブ」アクションを実行するセレクターをバインドする必要があります。同じページ上で複数のスライドをインスタンス化する場合は、すべてのスライド要素 (タブ/ペイン/次および前のページのアクション) を共通のラッパー要素で囲む必要があります。このロジックは、複数のタブインスタンスを作成する場合と同じ原則に従います。前
`<span id="OUTFOX_JTR_TRANS_NODE-44" class="OUTFOX_JTR_TRANS_NODE"><br>'.backward'</span>`	`<span id="OUTFOX_JTR_TRANS_NODE-44" class="OUTFOX_JTR_TRANS_NODE"><span>'.backward'</span></span>`	に従います。
「無効」	CSS クラス名'disabled'	前のページ `および` 下へ進む `要素。たとえば、`前の `要素は、前述のスクロールに '無効' がない場合です。`
false	このプロパティが	true `に設定されている場合、タブは自動的に次のタブに進み、スライドショーの自動「再生」が有効になります。` プロパティタブを`で回転させると便利です。`
本当	このプロパティが	true `に設定されている場合、次/前のタブのアクションボタンにマウスオーバーすると、自動再生` 機能は一時停止されます。
`<span id="OUTFOX_JTR_TRANS_NODE-70" class="OUTFOX_JTR_TRANS_NODE">3000<span></span></span>`	タブ間を自動的に移動する時間 (ミリ秒単位)。このオプションは、`<span id="OUTFOX_JTR_TRANS_NODE-70" class="OUTFOX_JTR_TRANS_NODE">3000</span>`	自動再生 `が有効になっている場合、または自動再生` メソッドが呼び出されます。
クリック可能	本当	`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 オブジェクト 1.2.0 以降 。このプラグインの設定オブジェクトを返します

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

getTabs タブ 1.2.0 以降 。このタグ API への参照を返します。プレイ API スライドショーを開始します。一時停止 API スライドショーを一時停止します。マウスがタブ、ペイン、ナビゲーションボタンから離れると、再生が再開されます。停止 API スライドショーを停止します。これは、play メソッドを呼び出すことによってのみ復元できます。イベントイベント jQuery ツールについて必ず読んでください。すべてのイベントリスナーは、イベントオブジェクトを最初のパラメーターとして受け取ります。 onBeforePlay 開始する前に再生してください。再生が開始されないようにするには、コールバックで false を返します。 onPlay 再生開始時。 onBeforePause 再生が一時停止されています。コールバックの TRANS_NODE> に戻る再生が開始されないようにします。一時停止中再生が一時停止されているとき。

イベント	トリガー時間