ホームページ >ウェブフロントエンド >htmlチュートリアル >ブートストラップ学習 (7)_カルーセルチャート_html/css_WEB-ITnose
ブートストラップ学習 (7)_カルーセルチャート_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:33:491491ブラウズ
1. カルーセル
Bootstrap カルーセル プラグインは、サイトにスライダーを追加するための柔軟で応答性の高い方法です。さらに、コンテンツは十分に柔軟であり、画像、iframe、ビデオ、またはその他の任意の種類のコンテンツを配置できます。
このプラグインの機能を個別に参照したい場合は、BootStrap で carousel.js を参照する必要があります。
例:
1. 要素をループする共通コンポーネントを表示するには、Bootstrap Carousel プラグインを使用します。カルーセルを実装するには、そのタグを含むコードを追加するだけです。 data 属性を使用する必要はなく、単純なクラスベースの開発だけを行うことができます。
2. オプションのキャプション: .item 内の .carousel-caption 要素を使用してスライドにキャプションを追加できます。オプションの HTML をそこに配置するだけで、自動的に位置が調整され、フォーマットされます。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title></title> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> <style type="text/css" > img { width:500px; height:400px; } #img { width:500px; height:400px; } </style></head><body style="margin-top: 20px; margin-left: 20px;"> <div id="img"> <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000"> <!-- 轮播（Carousel）指标 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item active"> <img src="../Imgs/img1/pic1.jpg" alt="first" /> <div class="carousel-caption">企鹅</div> </div> <div class="item"> <img src="../Imgs/img1/pic21.jpg" alt="seconed"/> </div> <div class="item"> <img src="../Imgs/img1/pic31.jpg" alt="third" /> <div class="carousel-caption">考拉</div> </div> </div> <!-- 轮播（Carousel）导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a></div> </div></body></html> 効果:
使用法:
$('.carousel').carousel()オプション名
タイプデフォルト値
| 説明 | 間隔 | 番号 | |
| data-interval | 各項目間の遅延時間を自動的にループします。 false の場合、カルーセルは自動的にループしません。 | pause | string |
| data-pause | マウスが入るとカルーセル ループを一時停止し、マウスが離れるとカルーセル ループを再開します。 | wrap | boolean |
| data-wrap | カルーセルが継続的にループするかどうか。 |
カルーセルプラグインの便利なメソッドをいくつか示します:
メソッド
説明
| .carousel(options) | カルーセルの初期化はオプションのオプションですオブジェクトを選択し、アイテムの循環を開始します。 | |
| .carousel('cycle') | カルーセル項目を左から右に循環します。 | |
| .carousel('pause') | カルーセル ループ アイテムを停止します。 | |
| .carousel(number) | 特定のフレームにループします (配列と同様に 0 からカウントが始まります)。 | |
| .carousel('prev') | 前の項目に移動します。 | |
| .carousel('next') | 次の項目に移動します。 | |
次の表に、カルーセル プラグインで使用されるイベントを示します。これらのイベントは関数のフックとして使用できます。
Event
Description
| slide.bs.carousel | このイベントは、スライド インスタンス メソッドが呼び出されるとすぐにトリガーされます。 | |
| slid.bs.carousel | このイベントは、カルーセルがスライド トランジション エフェクトを完了するとトリガーされます。 | |
| つまり、写真を切り替えるとイベントがトリガーされます |
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。