Bootstrap_Javascript_image carousel_html/css_WEB-ITnose

1. 構造解析

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

☑ カルーセル画像

☑ カルーセル画像カウンター

☑ カルーセル画像コントローラー

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

<div id="slidershow" class="carousel"></div>

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

<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="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>        </div>        <div class="item">            <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>        </div>        …        <div class="item">            <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" 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="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>            <!-- 图片对应标题和描述内容 -->            <div class="carousel-caption">                <h3>图片标题</h3>                <p>描述内容...</p>            </div>        </div>    …    </div></div>

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

2. data-target 属性: 値は、カルーセルによって定義された ID 名またはその他のスタイル識別子です。前の例で示したように、値は「#slidershow」であり、カルーセル カウンターの各 li に定義されます。 スタイルを追加し、画像と画像の切り替え効果を使用して滑らかな感触を与えることができることに注意してください。

2. 、データ属性を使用すると、カルーセルの位置を簡単に制御できます。これには主に次のカテゴリが含まれます: 1. データライド属性: 値カルーセルを取得し、カルーセル上で定義します。	3. data-slide属性：値にはprev、nextが含まれており、prevは後方スクロール、nextは前方スクロールを意味します。この属性値はカルーセル コントローラーのリンクでも定義され、コントローラーの href 値はコンテナーに設定されます。 4. カルーセルの ID 名またはその他のスタイル識別子。 5. data-slide-to 属性: data-slide-to="2" など、特定のフレームの添字を渡すために使用され、指定されたフレーム (添字は 0 から始まります) に直接ジャンプできます。カルーセルカウンターの各liで定義されます。	ここで、#slidershow レイヤーに slide	<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>

data-ride="carousel"、data-slide、data-slide-to に加えて、カルーセル コンポーネントは他の 3 つのカスタム属性もサポートしています: 🎜 🎜 🎜 🎜🎜属性名🎜🎜 🎜🎜 タイプ🎜🎜 🎜🎜デフォルト値🎜🎜 🎜🎜説明🎜🎜 🎜 🎜 🎜🎜データ間隔🎜🎜 🎜🎜数値🎜🎜 🎜🎜5000🎜🎜 🎜 🎜スライド回転の待機時間 (ミリ秒)。 false の場合、カルーセルは自動的にループを開始しません🎜🎜 🎜 🎜 🎜🎜data-pause🎜🎜 🎜🎜string🎜🎜 🎜🎜hover🎜🎜 🎜🎜 デフォルトでは、マウスがスライド領域上に移動すると再生が停止します。 Play🎜🎜 🎜 🎜 🎜🎜data-wrap🎜🎜 🎜🎜boolean🎜🎜 🎜🎜tru​​e🎜🎜 🎜🎜 カルーセルがループし続けるかどうか🎜🎜 🎜 🎜

　　如下代码实现“轮播不持续循环”和“轮播时间间隔为1秒”。

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

三 . 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="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>      <div class="carousel-caption">        <h3>图片标题1</h3>        <p>描述内容1...</p>      </div>    </div>    <div class="item">      <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>      <div class="carousel-caption">        <h3>图片标题2</h3>        <p>描述内容2...</p>      </div>    </div>    <div class="item">      <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a>      <div class="carousel-caption">        <h3>图片标题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() 方法中可以设置具体的参数，如：

属性名称	类型	默认值	描述
interval	number	5000	幻灯片轮换的等待时间（毫秒）。如果为false,轮播将不会自动开始循环
pause	string	hover	默认鼠标悬停留在幻灯片区域即停止播放，离开即开始播放
wrap	布尔值	true	轮播是否持续循环

　　使用时，在初始化插件的时候可以传关相关的参数，如：

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

 　　Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法，简单说明如下:

.carousel("cycle")：从左向右循环播放；

.carousel("pause")：停止循环播放；

.carousel("number")：循环到指定的帧，下标从0开始，类似数组；

.carousel("prev")：返回到上一帧；

.carousel("next")：下一帧