これは、jQuery に基づいた非常に強力なコンテンツ切り替えプラグインで、モバイル デバイスをサポートし、スライドショーとビデオ再生タイマーが組み込まれています。自動定義、自動応答、フルスクリーンなどのさまざまなモードがあり、さまざまなアニメーション効果、3D 効果があります...つまり、思いつくすべての効果を実行できます。その名は Slider Revolution です。
HTML
Slider Revolution は jQuery ベースのプラグインです。使用する場合は、最初に jQuery ライブラリ ファイルと、Slider Revolution が依存する css ファイルと js ファイルをロードする必要があります。
<script src="js/jquery.js"></script> <link rel="stylesheet" href="css/style.css" media="screen" /> <script src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script> <script src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
コンテンツ切り替えの主なHTML構造は次のとおりです。div.tp-bannerには複数の
<div class="tp-banner-container"> <div class="tp-banner" > <ul> <!-- SLIDE --> <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" > <!-- MAIN IMAGE --> <img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> <!-- LAYERS --> <!-- LAYER NR. 1 --> <div class="tp-caption lightgrey_divider skewfromrightshort fadeout" data-x="85" data-y="224" data-speed="500" data-start="1200" data-easing="Power4.easeOut">My Caption </div> ... </li> <li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" > <!-- MAIN IMAGE --> <img src="images/bg2.jpg" alt="darkblurbg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> <!-- LAYERS --> <!-- LAYER NR. 1 --> <div class="tp-caption lightgrey_divider skewfromrightshort fadeout" data-x="85" data-y="224" data-speed="500" data-start="1200" data-easing="Power4.easeOut">My Caption </div> ... </li> .... </ul> </div> </div>
jQuery 呼び出し
HTML 構造が整ったら、上記のコードを貼り付けた後、ブラウザーを開くと、Slider Revolution プラグインを呼び出すことができ、切り替え効果を確認できます。
$(function() { $('.tp-banner').revolution({ delay:9000, startwidth:1170, startheight:500, hideThumbs:10 }); });
オプションの設定と説明
Slider Revolution には多くのパラメーター オプション設定があります:
遅延: スライドコンテンツの滞留時間。デフォルトは 9000 ミリ秒
startheight: スライドコンテンツの高さ、デフォルトは 490 ピクセル。
startwidth: スライドするコンテンツの幅、デフォルトは 890 ピクセル。
NavigationType: ページめくりアイコンを表示します。デフォルトは「箇条書き」(ドット)、「なし」に設定すると表示されません。 。
NavigationArrows: ページめくりの矢印を表示します。デフォルトは nexttobullets です。これは、マウスがスライドしたときに左右のページめくりの矢印が表示されることを意味します。none に設定すると、ページめくりの矢印は表示されません。
touchenabled: タッチ スライドを許可するかどうか。デフォルトはオンで、オフに設定すると許可されません。
onHoverStop: マウスのスライド時に一時停止を有効にするかどうか、on: オン、off: オフ。
fullWidth: 画像コンテンツの全画面表示を有効にするかどうか、on: オン、off: オフ。
各
li の各要素に対して、次のオプションを設定してさまざまな効果を実現できます。
アニメーション スタイル、クラス属性: クラス属性値はさまざまなアニメーション スタイルを表します: sft - 上から短い、sfb - 下から短い、sfr - 右から短い、sfl - 左から短い、lft - 上から長い、lfb - 下から長い、lfr - 右からロング、lfl - 左からロング、フェード - フェーディング
data-x: li
を基準とした現在の要素の水平方向の変位
data-y: li
に対する現在の要素の垂直変位
data-speed: アニメーション時間、ミリ秒
data-start after: 現在の要素が表示されるまで数秒待ちます
データイージング: バッファアニメーション (easeOutBack を含む)... さまざまなアニメーション効果。jQuery Easing アニメーション効果拡張機能
さらに、タイムラインをタイマーとして追加したい場合は、スライド コンテンツの最後に次のコードを追加できます:
<div class="tp-bannertimer"></div>
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。