ブートストラップの写真カルーセル効果を見てみましょう。
上記はすべての人が共有する効果ですが、これはNetease Cloud Musicのホームページです。
最初にiOS7の公式コントロールライブラリに登場することを忘れないでください。Androidは、このビューも特定のバージョンに追加しました。デザインはUniversalです。BootStrap3は、Webでのそのような効果の使用もサポートしています。
次に、簡単な分析：
1。構造分析
カルーセルの写真には主に3つの部分が含まれています。
Carouselの写真
carousel写真のカウンター
carousel写真のコントローラー
ステップ1：カルーセル写真のコンテナを設計します。カルーセルスタイルはブートストラップフレームワークに採用されており、このコンテナのID値が定義されているため、データ属性を使用してトリガーを後で宣言します。
次のようにコードをコピーします。<div id = "slidershow"> </div>
ステップ2：カルーセル画像カウンターを設計します。 Carousel-Indicatorsスタイルを使用して、コンテナDiv.Carousel内にカルーセル画像計算機を追加します。その主な機能は、現在の画像の再生順序を表示することです（いくつかの写真があり、以下は一般的に同じリストを使用して使用されます。
<div id = "slidershow"> <！ - 画像の順序を設定 - > <ol> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ol> </div>
ステップ3： Carousel画像再生エリアを設計します。カルーセル画像の効果全体では、再生領域が最も重要な領域であり、主にカルーセルを必要とする写真を配置するために使用されます。この領域はCarousel-Innerスタイルを使用して制御され、カルーセル容器にも配置され、各カルーセル画像はアイテムコンテナに配置されます。
<div id = "slidershow"> <！ - 画像カルーセルの順序を設定します - > <ol> <li> 1 </li>…</ol> <！ - carousel picturesを設定します - > <div> <a href = "##"> <img src = "http：//images3.c-ctrip.com/rk/201407/ll580x145.> < </div> <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> </a> </div>…<div> <a href = "## src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> </a> </div>…<div> <a href = "##"> <img src = "http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"> </a> </div> </div> </div>
ステップ4：カルーセル画像の説明を設定します。多くのカルーセルの画像効果には、各画像に独自のタイトルと説明の内容もあります。実際、BootstrapフレームワークのCarouselも同様の効果を提供します。アイテムの画像の下部に対応するコードを追加するだけです。
<div id = "slidershow"> <！ - 画像カルーセルの順序を設定 - > <ol> <li> 1 </li>…</ol> <！ - カルーセル写真を設定します - > <div> <a href = "##"> <img src = "http：//images3.c-ctrip.com/rk/201407/ll580x145.> <対応するタイトルと説明のコンテンツ - > <div> <h3>画像タイトル</h3> <p>説明コンテンツ... </p> </div> </div>…</div> </div>
ステップ5： Carousel画像コントローラーを設計します。多くの場合、Carouselの写真には、前後に再生するコントローラーもあります。カルーセルでは、左右をカルーセルコントロールスタイルと組み合わせることで達成されます。左が前方の再生を意味する場所では、右側の再生を意味します。また、カルーセル容器に配置されています。
<div id = "slidershow"> <！ - 絵のカルーセルの順序を設定 - > <ol>…</ol> <！ - カルーセル写真を設定 - > <div>…</div> <！ - href = ""> <span </span> </a>
2。実装プロセス
<div id = "carousel-example-generic" data-ride = "carousel"> <！ - indicators-> <ol> <li data-target = "＃carousel-example-generic" data-slide-to = "0"> </li> data-target = "＃carousel-example-generic" data-slide-to = "2"> </li> </ol> <！ - スライドのラッパー - > <div role = "listbox"> <div> <img src = "..."> <div> ... </div> </div> <div> <img = "> </div> </</</</div> <！ - controls-> <a href = "＃carousel-example-generic" role = "button" data-slide = "prev"> <span> </span> <span>前</span> </a> <a href = "
3つの部分に分かれています
1。インジケータ
一部の部分は下の小さな点です...インジケータです
OLクラスは、このインジケータを作成するために使用されます
各Data-Slide-to = "0"属性を使用して、場所をガイドしてデフォルトのアクティベーション状態を定義します。
アイテム
<div> <img src = "..."> <div> <h3> ... </h3> <p> ... </p> </div> </div>
サスペンスはありません。写真のタイトルと内容を入力するだけです
2。左および左コントローラー
コードは次のとおりです
<a href = "＃mycarousel" role = "button" data-slide = "prev"> <span aria-hidden = "true"> </span> <span>前</span> </a> <a href = "＃mycarousel" lole = "button" data-slide = "" next "> <stra
JavaScriptでの操作
初期化
$（'。Carousel '）。Carousel（{interval：2000}）ループを実行します
.Carousel（ 'Cycle'）
一時停止
.Carousel（ 'Pause'）
特定のアイテムへの配置は0から始まります
.carousel（number）
前のもの
.carousel（ 'prev'）
次
.carousel（ 'next'）
ブートストラップに関するその他のコンテンツは、特別なトピックにもあります： 「ブートストラップ学習チュートリアル」
上記は、JavaScript Picture Carouselの詳細な紹介です。この記事がJavaScriptプログラミングを学習する際にすべての人に役立つことを願っています。