カルーセル図のケースでJS：
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
の<meta charset = "UTF-8"を>
<スタイルタイプ= "テキスト/ cssの">
* {
マージン：0;
パディング：0;
}
■は{
幅：800ピクセル。
高さ：300ピクセル;
位置：相対;
オーバーフロー：隠された; / *隐藏子元素* /
マージン：100pxに自動;
}
■はの.slider {
幅：100％。
高さ：100％;
}
■は.slider UL {
幅：1000％。
リストスタイル：なし。
位置：絶対;
トップ：0;
左：0;
}
■は.slider IMG {
垂直整列：トップ。
}
■は.slider UL李{
フロート：左;
■は.scroll_nav {
リストスタイル：なし。
位置：絶対;
右：20ピクセル;
下：10pxの;
}
■はの.scroll_nav李{
フロート：左;
幅：20ピクセル;
高さ：20ピクセル;
背景色：＃000;
色：#FFF;
テキスト整列：センター;
フォントサイズ：12ピクセル;
フォントファミリ：「微软雅黑」。
行の高さ：20ピクセル;
カーソル：ポインタ;
境界半径：50％。
マージン右：5pxの;
}
■は.scroll_nav li.current {
背景色：＃1 356acb。
}
■はの.arr {
幅：40ピクセル。
高さ：は50px;
フォントサイズ：35px;
フォントファミリ：「黑体」。
行の高さ：は50px;
背景色：RGBA（0,0,0,0.3） ; / * このように透明な背景を可能にし、テキストは収量* /は影響しません。
カラー：#FFF;
テキスト整列=左：センター;
位置：絶対;
トップ：125px;
重量フォント：太字;
表示：なし;
カーソル：ポインタ;
/ *不透明度：0.1;不透明度属性ボックスは、それが黒点テキストの内側になると同時に、半透明、半透明であろう* /
}
■はの.arr_prev {
左：5pxの;
}
■は.arr_next {
右：5pxの;
}
</スタイル>
<スクリプトタイプ= "テキスト/ JavaScriptを">
//
関数$（ID）{
のdocument.getElementById（ID）を返す;
}
window.onload =関数（）{
//左と右の矢印を回転させるマウスは図の領域を示す
。$（ 'スクロール'）のonmouseover =関数（）{
VAR this.getElementsByTagName ARRS =（ 'スパン'）。
用（VARのI = 0; I <arrs.length; I ++）{
ARRS [I] = .style.display 'ブロック';
}
}
。$（ 'スクロール'）れるonmouseout =関数（）{
VAR = this.getElementsByTagName ARRS （ 'スパン'）;
{（; I <arrs.lengthをI ++はVaRのI = 0）ため
ARRS [I] .style.display = 'なし';
}
}
// 2が動的の回転のナビゲーションバーを生成します。李
VAR imgCount = $（ 'sl_ul'）getElementsByTagNameの（ 'IMG'）長さ; ...図//番号取得
のための（VARのI = 0;私は<imgCount、私は++）{
VAR李=のdocument.createElement（」 「）; //動的ラベルのLi作成
li.innerHTML = I + 1;
IF（I == 0）{
li.className = "現在の";
}
各指標値のLiを動的に追加するための//を作成クリック数が添字図変更するにはボタンを見つけるために、次のシーケンス番号値、
li.setAttribute（「インデックス」、i）を 、
//2.2登録李クリックイベント：カルーセルスクロールマップ
=関数li.onclick（）{
//は、Liのスタイルを取得するために、排他的に考え
VAR LIS = $（ 'sc_nav'）getElementsByTagNameの（ '李'）;.
用（VARのI = 0;私はlis.lengthを<;私は++します）{
LIS [I] .className = "";
}
this.className = ""現在;
//ように設定その目標回転アニメーション図は、ロールアップ
対象this.getAttribute =（ 'インデックス'）-800 *;
}
//
$（ 'sc_nav'）のappendChild（LI） 。
}
// 3つの開始アニメーション処理緩和タイマwindow.onload
= 0 VARリーダー;
VAR対象= 0;
のsetInterval（関数（）{
リーダー=リーダー+（リーダーターゲット）/ 20である。
$（ 'sl_ul'）。リーダー+ = style.left "PX";
}、10）;
次へ：//イベント4右矢印をクリックします
$（ '次'）のonclick =関数（）{。
（ターゲット> -800 * 4）IF {
;標的- = 800
}他{
それがすでにある場合; //ターゲット= 0を最終的に画像は、直接バック最初の図にロール
}
setNavCurrent（）;
}
//左矢印クリックイベント：PREV
。$（ '前'）のonclick =関数（）{
IF（目標<0）{
対象+ = 800;
}
setNavCurrent（）;
}
// NAVのLiを選択従う矢印の変更をクリックして行い
、機能setNavCurrentを（）{
VAR指数= Math.abs（ターゲット/ 800）; //インデックスを取得
VAR LIS = $を（ ' sc_navリー'）getElementsByTagNameの（' '）;
私はlis.lengthを<;（VARのI = 0 Iは++）{
LIS [I] .className = "";
}
LIS [インデックス] = .className'「現在;
}
}
</ SCRIPT>
</ head>
<body>
<DIV CLASS = "ボックス" ID = "スクロール">
<DIV CLASS = "スライダ" ID = "SL">
<UL ID = "sl_ul">
<LI> < img SRC = "IMGS / 1.JPG" ALT = ""> </ LI>
<LI> <IMGのSRC = "IMGS / 2.JPG" ALT = ""> </ LI>
<LI> <IMG SRC =」 IMGS / 3.JPG "ALT = ""> </ LI>
<LI> <IMG SRC = "IMGS / 4.JPG" ALT = ""> </ LI>
<LI> <IMGのSRC =" IMGS / 5。 JPG」ALT = ""> </ LI>
</ UL>
</ div>
<ulのクラス= "scroll_nav" ID = "sc_nav">
<！ - <李クラス= "現在"> 1 </ LI>
<LI> 2 </ LI>
<LI> 3 </ LI>
<LI> 4 </ LI>
<LI> 5 </ LI> - >
</ UL >
<スパンクラス= "ARR arr_prev" ID = "PREV"> << / span>の
<スパンクラス= "ARR arr_next" ID = "次" >> </スパン>
</ div>
</ BODY>
</ HTML>
カルーセル図ブートストラップが書き込まれ、私たちは、ブートストラップで定義された属性を使用することができますjsのスクリプトを記述する必要はありません
例えば：
<！DOCTYPE HTML>
<HTML>
<HEAD>
<メタ文字コード= "UTF-8">
<メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1">
<タイトル> </タイトル>
<リンクのrel = "スタイルシート"のhref = "CSS / bootstrap.min.css" />
<スクリプトタイプ= "アプリケーション/ javascriptの" SRC = "JS / jqueryの-1.11.1.min.js"> </ SCRIPT>
<スクリプト言語= "JavaScriptの" SRC = "JS / bootstrap.min.js"> </ SCRIPT>
<スクリプト言語= "JavaScriptを">
</ SCRIPT>
<スタイルタイプ= "テキスト/ cssの">
#turn IMG {
幅：800ピクセル;
高さ：400ピクセル;
}
</スタイル>
<DIV CLASS = "行">
<DIV CLASS = "COL-MD-9">
の<divデータ乗り= "カルーセル" ID = "carousel_container"クラス= "カルーセルスライド">
<！ -图片容器- >
<！ -カルーセル-インナー：让图片水平排列- >
<divのクラス= "カルーセル・インナー">
<DIV CLASS = "項目" ID = "回す">
<IMG SRC = "IMG / pic01.jpg"クラス= "テキスト中心" />
<H4クラス= "カルーセル・キャプション">こんにちは</ H4>
</ div>
<DIV CLASS = "項目アクティブ"> <IMG SRC = "IMG / pic02.jpg" /> < / DIV>
<DIV CLASS = "アイテム"> <IMG SRC = "IMG / pic03.jpg" /> </ div>
</ div>
<！ -小圆圈容器- >
<OLクラス= "カルーセル・インジケータ">
<LIデータスライドへ= "0"データターゲット= "＃1 carousel_container"> </ LI>
<LIデータ・スライドへ= "1"データターゲット=」 #carousel_container "> </ LI>
<LIデータ・スライドへ= "2"データ・ターゲット= "＃1 carousel_container"> </ LI>
</ OL>
<！ -左右按钮- >
<HREF = "＃1 carousel_container"データ・スライド=」 PREV "クラス= "左カルーセルコントロール">
<スパンクラス= "glyphicon glyphiconシェブロンが左"> </ span>を
</a>に
は、<a href = "＃1 carousel_container"データスライド= "次の"クラス="右カルーセル・コントロール">
<スパンクラス=" glyphicon glyphiconシェブロン右"> </ span>を
</a>の
</ DIV>
</ DIV>
<DIV CLASS =" COL-MD-3" > </ divの>
</ div>
</ div>
</ BODY>
</ HTML>