ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery プラグイン Skippr はフォーカス チャート スライド Effects_jquery を実装します

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

WBOY
リリース: 2016-05-16 16:04:39
オリジナル
1282 人が閲覧しました
史上最高のフォーカス チャート スライドショー用の 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)
デモを見る スクリプトのダウンロード
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

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