jQueryツールタブ(スライドショー)_jquery

html

复制代码代码如下:

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

イベント	トリガー時間

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jqTransformフォーム美化プラグイン_jqueryの使い方次の記事：jqTransformフォーム美化プラグイン_jqueryの使い方

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved