jQuery プラグイン Skippr はフォーカス チャート スライド Effects_jquery を実装します

史上最高のフォーカス チャート スライドショー用の jQuery プラグイン、Skippr、軽量プラグイン、レスポンシブ レイアウト プラグイン、強力なパラメーター カスタマイズ

設定、切り替え速度、切り替え方法、左右の矢印を表示するかどうか、自動再生するかどうか、自動再生間隔などの設定をカスタマイズできます

パラメータ、プラグインの呼び出しも非常にシンプルで使いやすいです。呼び出し方法は以下に紹介されています。

1. jQuery とプラグインをロードします

<link rel="stylesheet" href="css/jquery.skippr.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.skippr.min.js"></script>

2.HTML コンテンツ

<div id="container"> 
    <div id="theTarget"> 
    <div style="background-image: url(img/image1.jpg)"></div> 
    <div style="background-image: url(img/image2.jpg)"></div> 
    <div style="background-image: url(img/image3.jpg)"></div> 
    <div style="background-image: url(img/image4.jpg)"></div> 
   <div style="background-image: url(img/image5.jpg)"></div> 
  </div>   
</div> 

3. 関数呼び出し

<script> 
 $(document).ready(function(){ 
 
     $("#theTarget").skippr({ 
 
      transition: 'slide', 
      speed: 1000, 
      easing: 'easeOutQuart', 
      navType: 'block', 
      childrenElementType: 'div', 
      arrows: true, 
      autoPlay: false, 
      autoPlayDuration: 5000, 
      keyboardOnAlways: true, 
      hidePrevious: false 
    });       
 
  }); 
</script> 

パラメータ設定の説明

トランジション：（フェード/スライド）切り替え方式

speed: スイッチング速度 (ミリ秒)

イージング: エフェクトの切り替え (easeOutQuart)

navType: ナビゲーション タイプの下 (ブロック/バブル)

arrows: 矢印の有無(true/false)

autoPlay: 自動的に再生するかどうか (true/false)

autoPlayDuration: 自動再生間隔 (ミリ秒)

keyboardOnAlways: キーボードの切り替えをサポートするかどうか (true/false)

hidePrevious: 最初に切り替えられた矢印を非表示にするかどうか (true/false)

デモを見る スクリプトのダウンロード

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