この例は、参照のためにブートストラップでのカルーセルの使用に関する包括的な分析を提供します。特定のコンテンツは次のとおりです
ソースコードファイル：
Carousel.scss
carousel.js
実装の原則：
表示するすべての要素を非表示にしてから、表示する現在のブロック、幅、高さを適応可能に指定します
ソースコード分析：
1。HTML構造：主に4つの部分に分かれています
1.1。コンテナ：最も外側のdivでは、データライド=「カルーセル」をホイール再生プラグインとして指定する必要があり、サークルインジケーターの関連を容易にするIDを提供します。
1.2。画像リストの部分は外側のdivで包まれ、各IMGはdivで包まれ、クラスはアイテムによって包まれます。
1.3。サークルインジケーター：OLリストを使用して、グラフィックリスト項目を表示します。各リスト項目は、現在の円のインデックス番号をマークするために使用されるData-Slide-to =” index”属性を指定する必要があります。
1.4。左右のコントロールボタン：左右に移動する機能を実現します
2。CSSスタイル
2.1。 Carousel：相対的な位置決めマークは1つだけです
2.2。 Carousel-Inner：画像リスト領域を回転させます。各アイテムには、変更するアイテムがあります。
2.2.1。アクティブ、次、および前で見られると見なされます。
2.2.2。 Carousel-Caption：各アイテムにタイトル情報が必要であり、デフォルトの位置が表示されることを意味します。
2.3。 Carousel-Control：左右のボタンのスタイルを設定し、勾配や透明性などの情報を設定します。 Icon-PrevとIcon-Nextの2つの追加スタイルを提供します。
2.4。 Carousel-Indicators：サークルパートスタイルは絶対に配置されています。各LIはインラインブロック要素として設定されています。 Text-Indent：-999を使用してフォントを非表示にします。
3。JSコード
3.1。主なコア方法はスライドで、写真の切り替えが実現します
3.1.1。画像スイッチが最初に実行されると、一時停止方法が呼び出され、暫定的にタイマーを設定します。画像スイッチが完了した後にのみ、タイマーを有効にするためにサイクルメソッドが呼び出されます。
3.1.2。受け入れられた2つのパラメーターのタイプと次のパラメーター
3.1.2.1。タイプ：ページを上下に変更することを意味します
3.1.2.2。次：今回はアクティブアイテムとして表示されます。渡されない場合は、getItemfordirectionメソッドを使用して取得する必要があります。
3.1.3。 $ active（現在アクティブアイテム）、$ next（アクティブアイテムである必要があるアイテム）、iscycling（タイマーカルーセルのタイマーハンドル）、方向（方向）、その他の基本パラメーターなどの基本的なパラメーターを取得します
3.1.4、その後、Slide.bs.carouselイベントをトリガーします
3.1.5。次に、インジケーターのインデックス項目を設定します
3.1.6。写真を切り替えます。 CSSアニメーションをサポートする場合は、アニメーションを使用して切り替えます。それ以外の場合は、CSSを直接スイッチに追加します。
3.1.7。アニメーションの切り替えの原則：
3.1.7.1。前：これは、写真を右にスクロールすることで組み合わされるスタイルです。現時点では、Prev自体は-100％です。写真を左端に置きます
3.1.7.2。次：画像を左にスクロールし、次の左にスクロールします（次のアイテム）。この時点で、次は100％で、画像を右端に置きます。
3.1.7.3。アクティブな右：写真は右側にある必要があるため、写真の幅の100％を移動する必要があります。
3.1.7.4。アクティブな左：画像は左側にあり、画像幅は-100％実行する必要があります
3.1.7.5。比較絵：
3.1.8。実装コード（CSS3を除く）：
.carousel-inner> .active、.carousel-inner> .next、.carousel-inner> .prev {display：block;}。carousel-inner> .active {left：0;}。上：0; width：100％;}。 .active.right {左：100％;}それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
素晴らしいトピックの共有：jQueryの写真カルーセルjavascript写真カルーセルブートストラップ写真カルーセル
上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。