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

WBOY
リリース: 2016-05-16 15:56:38
オリジナル
2552 人が閲覧しました

これは、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-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> 
    ログイン後にコピー

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

  • 関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート