jqueryプラグインbxsliderの使用例analyze_jquery

この記事の例では、jquery プラグイン bxslider の使用法について説明します。皆さんの参考に共有してください。具体的な使い方は以下の通りです:

まず、対応する js ファイルを呼び出します:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>

jQuery コード部分:

$(function(){ 
 $('#marquee').bxSlider({ 
  mode:'vertical', //默认的是水平 
  displaySlideQty:1,//显示li的个数 
  moveSlideQty: 1,//移动li的个数  
  captions: true,//自动控制 
  auto: true, 
  controls: false//隐藏左右按钮 
 }); 
});

HTML の構造は次のとおりです:

<div style="width:450px; height:296px; float:left; 
overflow:hidden; margin-left:200px;">
 <ul id="marquee">
  <li>
  <img src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy" alt="banner_美容" 
  style="width:450px; height:296px;">
  </li>
  <li>
  <img src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy" alt="banner_美容"
  style="width:450px; height:296px;">
  </li>
 </ul>
</div>

CSS は左ボタンと右ボタンのスタイルを定義します:

.bx-prev{ 
width:12px; height:26px; 
background:#f00;text-indent: -999999px;z-index: 999; 
position: absolute; float:left; left:455px; top:110px;
}
.bx-next{ 
width:12px; height:26px; 
background:#f00; text-indent: -999999px;
z-index: 999; 
position: absolute; top:110px;left:-15px;
}

パラメータの説明:

bxSlider の詳細な設定パラメータ:
bxSlider には多くの構成パラメーターがあり、パラメーターを使用してさまざまなスライダー効果を作成できます:

mode: 'horizo​​ntal', // 'horizo​​ntal', 'vertical', 'fade' はスライダーのスクロール方向を定義します。
から選択できる値は 3 つあります。 infiniteLoop: true, // true, false - 最後の無限ループの後に最初のスライドを表示します
HideControlOnEnd: false, // true, false - true の場合、最後のスライドの「next」コントロールと最初のスライドの「prev」コントロールを非表示にします。 true に設定すると、最後のスライドと前のスライドの「next」コントロールを非表示にします。 "前"
コントロール: true、// true、false - 前と次は、「前へ」ボタンと「次へ」ボタンを表示するかどうかを制御します
Speed: 500, // 整数 - ミリ秒単位、スライド トランジションが Speed に占める時間の長さ、単位はミリ秒
easing: 'swing', // jquery.easing.1.3.js で使用 - 利用可能なオプションについては http://gsgd.co.uk/sandbox/jquery/easing/ を参照してください
pager: true, // true / false - ページャーを表示します
pagerSelector: null, // jQuery セレクター - ページャーを含む要素 例: '#pager'
pagerType: 'full', // 'full', 'short' - 'full' ページャーが 1,2,3 を表示する場合... 'short' ページャーが 1 / 4 を表示する場合 full が設定されている場合、1、2、3 が表示されます。 …、ショートに設定すると1/4が表示されます。 pagerLocation: 'bottom', // 'bottom', 'top' - ページャーの位置 ページ番号の位置
pagerShortSeparator: '/', // string - 例: 'of' ページャーは 4 つのページ区切り文字のうち 1 つを表示します
pagerActiveClass: 'pager-active', // string - アクティブなページャー リンクに付加されたクラス名 現在のページ番号の className
nextText: 'next', // string - 'next' コントロールに表示されるテキスト 次のページのテキスト
nextImage: '', // 文字列 - 'next' コントロールに使用される画像のファイルパス 例: 'images/next.jpg' 次のページを画像に設定できます
nextSelector: null, // jQuery セレクター - 次のコントロールを含む要素 例: '#next'
prevText: 'prev', // string - 'previous' コントロールに表示されるテキスト 前のページのテキスト
prevImage: '', // 文字列 - 「前」コントロールに使用される画像のファイルパス 例: 'images/prev.jpg' 前のページの画像
prevSelector: null, // jQuery セレクター - 前のコントロールを含む要素 例: '#next'
captions: false, // true, false - 画像のキャプションを表示します (画像の 'title' タグを読み取ります) 画像のタイトルを表示し、画像の title 属性の内容を読み取るかどうか。

captionsSelector: null, // jQuery セレクター - キャプションを含む要素 例: '#captions'
auto: false, // true, false - スライドショーを自動的に変更します スライドショーは自動的にスクロールします
autoDirection: 'next', // 'next', 'prev' - 自動ショーが自動スクロールの順序をたどる方向
autoControls: false, // true, false - 自動の「開始」および「停止」コントロールを表示します 自動スクロール コントロール キーを表示します
autoControlsSelector: null, // jQuery セレクター - 自動コントロールを含む要素 例: '#auto-controls'
autoStart: true, // true, false - false の場合、ショーは「開始」コントロールがアクティブになるまで待機します
autoHover: false, // true, false - true の場合、マウスオーバーで表示が一時停止します マウスオーバーを設定すると、自動スクロールが一時停止します
autoDelay: 0, // 整数 - 自動ショーを開始するまでの時間 (ミリ秒単位)
一時停止: 3000, // 整数 - 各スライド トランジション間の持続時間 (ミリ秒単位) トランジション時間
startText: 'start', // string - 'start' コントロールの開始ボタンのテキストに表示されるテキスト
startImage: '', // string - 'start' コントロールに使用される画像のファイルパス 例: 'images/start.jpg' スタート ボタンの画像
stopText: 'stop', // string - 'stop' コントロールに表示されるテキスト 停止ボタンのテキスト
stopImage: '', // 文字列 - 「停止」コントロールに使用される画像のファイルパス 例: 'images/stop.jpg' 停止ボタンの画像
ticker: false, // true, false - 連続モーションティッカーモード (ニュースティッカーと考えてください)
// 注: autoControls と autoControlsSelector はティッカー
に適用されます。 tickerSpeed: 5000, // 整数 - 速度に逆効果があるため、値 10000 は
になります。 // 非常にゆっくりスクロールしますが、値 50 を指定すると非常に速くスクロールします。
tickerDirection: 'next', // 'next', 'prev' - ティッカーショーが移動する方向
tickerHover: false, // true, false - true の場合、マウスオーバーでティッカーが一時停止します
WrapperClass: 'bx-wrapper', // string - スライダーラッパーに付加されたクラス名
startingSlide: 0, // 整数 - 指定されたスライドからショーが開始されます。 注: スライドは 0 から始まります。 displaySlideQty: 1, // 整数 - 一度に表示するスライドの数
moveSlideQty: 1, // 整数 - 一度に移動するスライドの数
randomStart: false, // true, false - true の場合、ショーはランダムなスライドで開始されます

この記事が皆さんの jQuery プログラミングに役立つことを願っています。