Bootstrap 画像カルーセル効果_JavaScript スキルの総合分析

1. 構造解析

カルーセル画像は主に 3 つの部分で構成されます:

☑ 写真のカルーセル

☑ カルーセル写真のカウンター

☑カルーセル写真用コントローラー

ステップ 1: カルーセル画像のコンテナを設計します。ブートストラップ フレームワークでカルーセル スタイルを使用し、このコンテナーの ID 値を定義して、後でデータ属性を使用してトリガーを宣言できるようにします。

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

ステップ 2: カルーセル画像カウンターを設計します。 carousel-indicators スタイルを使用して、コンテナ div.carousel 内にカルーセル画像計算機を追加します。その主な機能は、現在の画像の再生順序を表示することです (複数の画像がある場合は、通常、 を使用して作成されます)。連続リスト:

<div id="slidershow" class="carousel">
<!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li></ol>
</div>

ステップ 3: カルーセル画像の再生領域をデザインします。カルーセル画像の全体的な効果において、再生領域は最も重要な領域です。この領域は主に、回転する必要がある画像を配置するために使用されます。この領域は、carousel-inner スタイルを使用して制御され、カルーセル コンテナー内にも配置され、各カルーセル画像はアイテム コンテナーを介して配置されます。

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"  class="lazy" alt=""></a>
 </div>
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"  class="lazy" alt=""></a>
 </div>
 …
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"  class="lazy" alt=""></a>
 </div>
 </div>
</div>　

ステップ 4: カルーセル画像の説明を設定する 多くのカルーセル画像効果にも、各画像に独自のタイトルと説明があります。実際、Bootstrap フレームワークの Carousel も同様の効果を提供します。 item の画像の下部に対応するコードを追加するだけです。

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"  class="lazy" alt=""></a>
 <!-- 图片对应标题和描述内容 -->
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题</h3>
 <p>描述内容...</p>
 </div>
 </div>
 …
 </div>
</div>

ステップ 5: カルーセル イメージ コントローラーを設計します。多くの場合、カルーセルには前方コントローラーと後方コントローラーもあります。これは、カルーセルで左右を組み合わせたカルーセル コントロール スタイルによって実現されます。このうち、左は順方向再生、右は逆方向再生を意味します。これはカルーセル コンテナーにも配置されます:

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 …
 </div>
 <!-- 设置轮播图片控制器 -->
 <a class="left carousel-control" href="" >
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a> 
</div>

2. 宣言型タッチカルーセル画像の再生 (JS は必要ありません)

<div id="slidershow" class="carousel slide" data-ride="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active" data-target="#slidershow" data-slide-to="0"></li>
 <li data-target="#slidershow" data-slide-to="1"></li>
 <li data-target="#slidershow" data-slide-to="2"></li>
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201512/201512392831189.jpg&#63;201511392841?x-oss-process=image/resize,p_40"  class="lazy"    style="max-width:90%" alt="Bootstrap 画像カルーセル効果_JavaScript スキルの総合分析" ></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题1</h3>
 <p>描述内容1...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201512/201512392831189.jpg&#63;201511392841?x-oss-process=image/resize,p_40"  class="lazy"    style="max-width:90%" alt="Bootstrap 画像カルーセル効果_JavaScript スキルの総合分析" ></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题2</h3>
 <p>描述内容2...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201512/201512392831189.jpg&#63;201511392841?x-oss-process=image/resize,p_40"  class="lazy"    style="max-width:90%" alt="Bootstrap 画像カルーセル効果_JavaScript スキルの総合分析" ></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题3</h3>
 <p>描述内容3...</p>
 </div>
 </div>
 </div>
 <!-- 设置轮播图片控制器 -->
 <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a>
</div>

宣言的アプローチは、カルーセルの位置を簡単に制御できるデータ属性を定義することによって実現されます。

主に次のタイプが含まれます:
1. data-ride 属性: 値カルーセルを取得し、カルーセル上で定義します。 2. データターゲット属性: 値は、カルーセルによって定義された ID 名またはその他のスタイル識別子です。前の例で示したように、値は「#slidershow」であり、カルーセル カウンターの各 li で定義されます。
3. data-slide 属性: 値には prev、next が含まれます。prev は後方スクロールを意味し、next は前方スクロールを意味します。この属性値はカルーセル コントローラーのリンクでも定義され、コントローラーの href 値はコンテナーに設定されます。 4. カルーセルの ID 名またはその他のスタイル識別子。
4. data-slide-to 属性: data-slide-to="2" など、特定のフレームの添字を渡すために使用されます。これは、指定されたフレームに直接ジャンプできます (添字は 0 から始まります)、同じ定義カルーセルカウンターの各リーにあります。
ここで注目していただきたいのは、#slidershow レイヤーにスライド スタイルを追加し、画像や画像切り替え効果を使用して滑らかな感触を与えることができることです。

<div id="slidershow" class="carousel slide" data-ride="carousel">
 ...
</div>

data-ride="carousel"、data-slide、data-slide-to に加えて、カルーセル コンポーネントは他の 3 つのカスタム属性もサポートしています。

次のコードは、「連続ループなしのカルーセル」と「カルーセルの時間間隔は 1 秒」を実装しています。

<div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000">
 ......
</div>

3. JavaScript トリガー メソッド画像カルーセル
HTML:

<div id="slidershow" class="carousel slide">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active" data-target="#slidershow" data-slide-to="0">1</li>
 <li data-target="#slidershow" data-slide-to="1">2</li>
 <li data-target="#slidershow" data-slide-to="2">3</li>
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"  class="lazy" alt=""></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题1</h3>
 <p>描述内容1...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"  class="lazy" alt=""></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题2</h3>
 <p>描述内容2...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"  class="lazy" alt=""></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题3</h3>
 <p>描述内容3...</p>
 </div>
 </div>
 </div>
 <a class="left carousel-control" href="#slidershow" role="button">
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="#slidershow" role="button">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a>
</div>

JS:

 $(function(){
 $("#slidershow").carousel({
 interval:2000
 });
 $("#slidershow a.left").click(function(){
 $(".carousel").carousel("prev");
 });
 $("#slidershow a.right").click(function(){
 $(".carousel").carousel("next");
 });
 });

carousel() メソッドでは、次のような特定のパラメータを設定できます。

これを使用する場合、プラグインの初期化時に次のような関連パラメーターを渡すことができます。

$("#slidershow").carousel({
 interval: 3000
});

Bootstrap フレームワークのカルーセル プラグインは、いくつかの特別な呼び出しメソッドもユーザーに提供します。簡単な説明は次のとおりです。

.carousel("cycle"): 左から右へループ再生
.carousel("pause"): ループ再生を停止します。
.carousel("number"): 指定されたフレームまでループします。配列
と同様に、添字は 0 から始まります。 .carousel("prev"): 前のフレームに戻ります。 .carousel("next")：次のフレーム

上記は JavaScript 画像カルーセルの詳細な紹介です。この記事が JavaScript プログラミングを学習する皆さんのお役に立てれば幸いです。