画像カルーセル効果はウェブで見ることができ、多くの人もそれをスライドショーと呼んでいます。ディスプレイの主な効果は、サイクルで複数の写真を再生し、右から左に再生することです。マウスが写真の上に浮かぶと、それを演奏すると一時停止します。マウスが上に浮かぶか、右下隅のドットをクリックすると、対応する画像が表示されます。
この画像カルーセル効果は、カルーセルプラグインを介してブートストラップフレームワークに実装されています
デモ効果のスクリーンショット：
コード：
<！Doctype html> <html> <head> <meta charset = "utf-8"> <！ - <link rel = "styleSheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/boottrap.min.cs"> <> href = "css/bootstrap.min.css"/> <style> body {padding：10px; margin：10px;} </style> </head> <body> <body> <div id = "mycarousel"> <！ - ステップ1：カルーセル写真の設計コンテナ。 - > <！ - #slidershowレイヤーはスライドスタイルを追加し、写真と写真を使用してエフェクトをスムーズにしてスイッチにしています - > <ol> <！ - ステップ2：カルーセル画像カウンターを設計します。 - > <li data-target = "＃mycarousel" data-slide-to = "0"> </li> <li data-target = "＃mycarousel" data-slide-= "1" 1 "> </li> <li date-target ="コントロールするCarousel-Innerスタイル - > <div> <img src = "http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"> <div> <h4>タイトル1 </h4> <p>画像1 </p> </div> <div> < src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> <div> <h4>タイトル2/h4> <p>画像2 </p> </div> <div> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> <div> <h4>タイトル2/h4> <p>画像2 </p> </div> <div> <img src = "http://images3.c-ctrip.com/rk/201403/yfdd580145a.png"> <div> <h4>タイトル3 </h4> <p>絵の内容の紹介3 </p> </div> </div> <！ - ステップ4：carousel写真コントローラーを設計します。左カルーセルコントロールを前方に再生し、後方に再生するコントローラーを再生します - > <a href = "＃mycarousel" data-slide = "prev"> ‹<！ - <a href = "＃slidershow" role = "button" data-slide = "pred"> - > <span> </span </a> <a href = "＃mycarousel" data-slide = "next">› <span> </span> <！ - <a href = "＃carousel-example-generic" data-slide = "prev"> </span> </a> <a href = "＃carousel-example-generic" data-slide = "next"> <span> </span> </a> - > </div> <script> $（ '。Carousel'）。Carousel（）</script> <script Type = "text/javascript" src = "js/jquery.min.js"> </script> <text/javascript "" src = "js/bootstrap.min.js"> </script> <！ - <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </scrip> - > <！ - <スクリプトsrc = "http://maxcdn.bootstrapcdn.com/boottrap/3.2.0/js/bootstrap.min.js"> </script> - > </body> </html> /* bootstrap.cssファイル5835からライン5863*/。 /*カウントエリア全体の絶対位置*/下：10px; /*コンテナカルーセルの下部から10px*/z-index：15; /*Z軸にそのレベルを設定*//*レベルのカウントエリア全体を中心*/左：50％;幅：60％;パディング左：0;マージン左：-30％;テキストアリグイン：センター;リストスタイル; -999PX;カーソル：ポインター;バックグラウンドカラー：＃000/9;バックグラウンドカラー：RGBA（0、0、0、0）;境界：1PX SOLID #FFF; Border-Radius：10PX;}/*現在の状態スタイル*/。写真カルーセル - 宣言的なタッチカルーセルのプレイ
カルーセル図をトリガーするには2つの方法があります。1つは宣言的で、もう1つはJavaScriptです。まず、宣言的な方法を見てみましょう。
宣言方法は、カルーセルの位置を簡単に制御できるデータ属性を定義することにより実装されます。主に次のタイプが含まれています。
•データライドプロパティ：値カルーセルを取り、カルーセルで定義します。
•データターゲットプロパティ：ID名またはその他のスタイル識別子を使用して、値Carouselで定義します。前の例に示すように、値「#slidershow」を取得し、Carouselカウンターの各LIで定義します。
•データスライド属性：値には、prev、次に、前方のスクロールが後方にスクロールすることを意味し、次の意味が前方にスクロールすることが含まれます。このプロパティ値は、CarouselコントローラーのAリンクでも定義され、コントローラーHREF値はID名またはコンテナカルーセルのその他のスタイル識別子に設定されます。
•Data-Slide-to属性：この指定されたフレームに直接リダイレクトできるデータスライド= "2"など、特定のフレームの添え字を渡すために使用されます（添え字は0から始まります）。
Data-Ride = "Carousel"、Data-Slide、およびData-Slide-Toに加えて、Carouselコンポーネントは他の3つのカスタムプロパティもサポートしています。
| 属性名 | タイプ | デフォルト値 | 説明する |
| データインターバル | 番号 | 5000 | スライド回転の待ち時間（ミリ秒）。 falseの場合、カルーセルはループを自動的に起動しません |
| データ後 | 弦 | ホバー | デフォルトのマウスはスライドエリアに吊り下げられており、出発時に再生が開始されます。 |
| データラップ | ブール値 | 真実 | カルーセルの連続ループです |
次のコードは「Carouselは継続的にループしません」と「Carousel Time間隔は1秒です」を実装します。
<div id = "slidershow" data-ride = "carousel" data-rap = "false" data-interval = "1000"> ...... </div>
上記の3つの属性は、コンテナ要素または識別子（または左および右制御リンク）で定義できますが、後者の定義の優先度が高くなります。
Image Carousel - JavaScriptトリガーメソッド
3つのステートメントData-ride = "Carousel"およびdata-slide = "prev"およびdata-slide = "next"が削除されました。 JSコードを使用して、「自動画像カルーセル」と「フォワードボタンとバックワードボタン」の関数を実装しましょう。
JSを使用して、「自動画像カルーセル」と「フォワードおよびバックワードボタン」の機能を実装します
デフォルトでは、Data-Ride = "Carousel"属性がCarouselコンテナに定義されている場合、ページのロード後にCarousel画像スイッチング効果が自動的にロードされます。 Data-Ride属性が定義されていない場合、Carousel画像の切り替えをJavaScriptメソッドを介してトリガーできます。特定の使用方法は次のとおりです。
コードコピーは次のとおりです。
$（ "。Carousel"）。Carousel（）;
コンテナIDで指定することもできます。
コードコピーは次のとおりです。
$（ "＃slidershow"）。carousel（）;
特定のパラメーターは、次のようなCarousel（）メソッドで設定できます。
| 属性名 | タイプ | デフォルト値 | 説明する |
| 間隔 | 番号 | 5000 | スライド回転の待ち時間（ミリ秒）。 falseの場合、カルーセルはループを自動的に起動しません |
| 一時停止 | 弦 | ホバー | デフォルトのマウスはスライドエリアに吊り下げられており、出発時に再生が開始されます。 |
| 包む | ブール値 | 真実 | カルーセルの連続ループです |
それを使用する場合、次のようなプラグインを初期化するときに、ステータスの関連パラメーターを渡すことができます。
$（ "＃slidershow"）。carousel（{interval：3000}）;実際、Carousel（）メソッドのパラメーターを構成すると、カルーセル効果を自動的に切り替えることができます。ただし、BootstrapフレームワークのCarouselプラグインは、次のようにいくつかの特別な呼び出し方法をユーザーに提供します。
•.Carousel（ "Cycle"）：左から右に再生。
•.Carousel（ "Pause"）：ループ再生を停止します。
•.carousel（ "number"）：指定されたフレームにループすると、添え字はアレイと同様に0から始まります。
•.carousel（ "prev"）：前のフレームに戻ります。
•.Carousel（ "Next"）：次のフレーム
たとえば、前のコールメソッドであるフォワードボタンとバックボタンは適切に機能しません。実際、それらは.carousel（ "prev"）および.carousel（ "next"）メソッドを介して正常に作業するために使用できます。コードは次のとおりです。
$（function（）{$（ "＃slidershow"）。carousel（{interval：2000}）; $（ "＃slidershow a.left"） a.right "） <！doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "styleSheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/boottrap.min.cs 10px;} </style> </head> <body> <div id = "carousel-example" data-ride = "carousel"> <！ - indicators-> <ol> <li data-target = "＃carousel-example" data-slide-= "0" "> </li> <li date-target =" data-target = "＃carousel-example" data-slide-to = "1"> </li> <li data-target = "＃carousel-example" data-slide-to = "1"> </li> <li date-target = " src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home5.jpg" /> <div>...</div> </div> <div> <img src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home2.jpg" /> <div>... src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home3.jpg" /> <div>..... href = "＃carousel-example" data-slide = "next"> <span> </span> </a> </div> <！ - <script> $（function（）{$（ '。Carousel'）。Carousel（）;}） src = "js/bootstrap.min.js"> </script> <！ - <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </scrip> - > <！ - <スクリプトsrc = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> - > </body> </html>wulin.comは、ブートストラップ関連のトピックを推奨しています。
ブートストラップコンポーネント操作スキル
ブートストラップ関連の知識の概要
上記は、編集者が紹介したブートストラップカルーセル回転図の使用例の詳細な説明です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！