この例は、参照のためにブートストラップでのカルーセルの使用に関する包括的な分析を提供します。特定のコンテンツは次のとおりです
ソースコードファイル:
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プログラミングを学ぶことが役立つことを願っています。