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

これは、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には複数の25edfb22a4f469ecb59f1190150159c6タグが含まれており、メイン画像、テキスト、ボタン情報を含む切り替えコンテンツが配置されます。この情報は、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-horizo​​ntal、slotslide-horizo​​ntal、slotfade-horizo​​ntal、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 アニメーション効果拡張機能

を参照してください。

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

 
<div class="tp-bannertimer"></div> 

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。