ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery bxCarousel で画像スクロール切り替え効果を実装するサンプルコード_jquery

jQuery bxCarousel で画像スクロール切り替え効果を実装するサンプルコード_jquery

WBOYオリジナル: 2016-05-16 17:33:491525ブラウズ

BxCarousel は、多くの構成を備えた使いやすい Jquery 画像スクロールプラグインです。その主な機能は次のとおりです。
◆ 表示する要素の総数を指定できます
◆ 表示する要素の数を指定できます。毎回スクロール
◆ 自動再生モード
◆ 前/次ボタンで画像の流れを制御
パラメータの意味:
display_num: 要素数、複数の画像を表示
move: 左右のコントロールキーをクリックすると、移動する要素の数が表示されます。ここでは 2 つの画像の移動です
prev_image: 前の要素のボタン画像
next_image: 次の要素のボタン画像
margin: 画像間のギャップ、通常 10px に設定
auto: 自動スクロール効果
controls: 左右のコントロールボタンを表示するかどうか、ここで false は左右のコントロールボタンを表示しないことを意味します
auto_hover: マウスがカルーセル領域上にあるときに画像カルーセルを停止するかどうか
BxCarousel の使用法と構成
まず、HTML コードは次の形式に準拠する必要があります

コードをコピーしますコードは次のとおりです:

 
コンテンツの最初の部分
 >2 番目のコンテンツ

3 番目のコンテンツ

4 番目のコンテンツ

 bxCarousel は要素を無制限に受け入れることができます

jQuery コードは次の形式に準拠する必要があります

コードをコピーコードは次のとおりです: $(document).ready(function(){

$('ul').bxCarousel({

display_num: 4, // 表示される要素の数 
move: 4, // スライドを移動する要素の数 
speed: 500, / / スライド アニメーションの終了にかかるミリ秒単位の数値 
margin:0, // 各  要素に適用される右マージン (ピクセル単位、ただし「px」は含まれません) 
auto: false, // ユーザーがクリックしなくてもスライドを自動的に再生します 
auto_interval: 2000, // 各自動アニメーション間のミリ秒単位の時間 
auto_dir : 'next', // 自動スライドショーの方向 (オプション: 'next', 'prev') 
auto_hover: false, // ユーザーがスライドショーの上にマウスを置いたときにスライドショーを停止するかどうかを決定します 
next_text: 'next' , // 'next' コントロールに使用されるテキスト 
next_image: '', // 'next' コントロールに使用される画像 
prev_text: 'prev', // 'prev' コントロールに使用されるテキスト 
prev_image: '', // 使用される画像'prev' コントロールの場合 
controls: true // コントロールが表示されるかどうかを決定します 
}) 
}); 

 
div.bx_container や div などの HTML 要素.bx_wrap は js によって生成および追加されます。bxCarousel プラグインを使用する場合、視覚的な美しさを実現するために、div.bx_container、div.bx_wrap およびそれらの内部の子要素に必要な CSS スタイルを忘れずに追加してください。 

bxCarousel は無限ループメカニズムであることにも注意してください。HTML に何が起こるかを確認するには、[次へ] ボタンをクリックし続けてください。！
bxCarousel は画像だけでなく、他の HTML 要素でも機能します。
auto 属性を有効にする場合は、speed 属性値が継続時間よりも小さいことを確認してください。

コード例
:

コードをコピーコードは次のとおりです: