jQuery プラグイン Slider Revolution がレスポンシブなアニメーションを実装し、画像をスライドさせて切り替えます。-jsチュートリアル-php.cn

jQuery プラグイン Slider Revolution がレスポンシブなアニメーションを実装し、画像をスライドさせて切り替えます。

WBOY

リリース： 2016-05-16 15:56:38

オリジナル

2565 人が閲覧しました

これは、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には複数の

タグが含まれており、メイン画像、テキスト、ボタン情報を含む切り替えコンテンツが配置されます。この情報は、Slider Revolution によって認識されるように、それぞれのデータ属性とペアになります。

<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: オフ。

各

タグにはさまざまな効果を設定できます:
data-transition: コンテンツのスライド効果。次の値を設定できます: boxslide、boxfade、slotzoom-horizontal、slotslide-horizontal、slotfade-horizontal、slotzoom-vertical、slotslide-vertical、slotfade-vertical、カーテン 1、カーテン 2 、カーテン -3、スライド左、スライド右、スライドアップ、スライドダウン、フェード
data-slotamount: 切り替え時に分割される正方形のブロックの数。
データリンク: 画像リンク
データ遅延: 現在のスライダーコンテンツの滞留時間を設定します

li の各要素に対して、次のオプションを設定してさまざまな効果を実現できます。
アニメーションスタイル、クラス属性: クラス属性値はさまざまなアニメーションスタイルを表します: sft - 上から短い、sfb - 下から短い、sfr - 右から短い、sfl - 左から短い、lft - 上から長い、lfb - 下から長い、lfr - 右からロング、lfl - 左からロング、フェード - フェーディング
data-x: li
を基準とした現在の要素の水平方向の変位 data-y: li
に対する現在の要素の垂直変位 data-speed: アニメーション時間、ミリ秒
data-start after: 現在の要素が表示されるまで数秒待ちます
データイージング: バッファアニメーション (easeOutBack を含む)... さまざまなアニメーション効果。jQuery Easing アニメーション効果拡張機能

を参照してください。

さらに、タイムラインをタイマーとして追加したい場合は、スライドコンテンツの最後に次のコードを追加できます: