私は3つのブートストラップ画像のカルーセル効果を共有しましたが、あなたが満足しているものは常にあると思います！
最初の効果：ブートストラップシンプルなカルーセル
<！Doctype html> <html> <head> <title> bootstrapインスタンス - シンプルなカルーセルプラグイン</title> <link href = "/3.0.3/css/bootstrap.min.css" rel = "styleSheet"> <script src = "/jquery/jquery/jquery/jquery src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <！ - carousel metrics-> <ol> <li data-target = "＃mycarousel" data-slide-to = "0" data-slide-to = "1"> </li> <li data-target = "＃mycarousel" data-slide-to = "2"> </li> </ol> <！ - carouselプロジェクト - > <div> <img src = "/wp-content/uploads/2014/07/slide1.png src = "/wp-content/uploads/2014/07/slide2.png"> </div> <div> <img src = "/wp-content/uploads/2014/07/slide3.png"> </div> </div> <！ - carousel navigation-> <"＃miCarousel"> ">"> ">" <a href = "＃mycarousel" data-slide = "next">› </a> </div> </body> </html>
2番目のタイプ：タイトル付きカルーセル（マニュアル）
<！doctype html> <html> <head> <title> bootstrapインスタンス - カルーセルプラグインのタイトル</title> <link href = "/bootstrap/3.0.3/css/bootstrap.min.css" rel = "styleSheet"> <scritce src = "/jquery/jquery/jquery src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <！ - carousel metrics-> <ol> <li data-target = "＃mycarousel" data-slide-to = "0" data-slide-to = "1"> </li> <li data-target = "＃mycarousel" data-slide-to = "2"> </li> </ol> <！ - carouselプロジェクト - > <div> <img src = "/wp-content/uploads/2014/07/slide1.png src = "/wp-content/uploads/2014/07/slide2.png"> <div>タイトル2 </div> </div> <div> <img src = "/wp-content/uploads/2014/07/slide3.png"> <div>タイトル3 href = "＃mycarousel" data-slide = "prev"> ‹</a> <a href = "＃mycarousel" data-slide = "next"> </a> </div> </body> </html>
3番目のタイプ：JSコントロール自動カルーセル
<！doctype html> <html> <head> <title> bootstrapjsコントロールカルーセル</title> <link href = "/bootstrap/3.0.3/css/bootstrap.min.css src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <！ - carousel indicator-> <ol> <li data-target = "＃mycarousel" data-slide-to = "0" data-slide-to = "1"> </li> <li data-target = "＃mycarousel" data-slide-to = "2"> </li> </ol> <！ - carouselプロジェクト - > <div> <img src = "/wp-content/uploads/2014/07/slide1.png src = "/wp-content/uploads/2014/07/slide2.png"> </div> <div> <img src = "/wp-content/uploads/2014/07/slide3.png"> </div> </div> <！ - carousel navigation-> <"＃miCarousel"> ">"> ">" <a href = "＃mycarousel" data-slide = "next">› </a> <！ - コントロールボタン - > <div style = "text-align：center;"> <入力タイプ= "ボタン"値 "value =" start "> <inputタイプ=" value " 1 "> <入力タイプ="ボタン "値"値 "スライド2"> <入力タイプ= "ボタン"値 "値" value = "スライド3"> </div> </div> <script> $（function（）{// carousel $（ "。start-slide"）。 carousel $（ "。一時停止） $（ "。次のスライド"） $（ "＃mycarousel"）。 }）; </script> </body> </html>特定のパラメーターは、次のようなCarousel（）メソッドで設定できます。
それを使用する場合、次のようなプラグインを初期化するときに、ステータスの関連パラメーターを渡すことができます。
$（ "＃slidershow"）。carousel（{interval：3000}）;BootstrapフレームワークのCarouselプラグインは、次のようにいくつかの特別な呼び出し方法をユーザーに提供します。
.Carousel（ "Cycle"）：左から右に再生します。
.Carousel（ "Pause"）：ループ再生を停止します。
.carousel（ "number"）：指定されたフレームにループし、添え字はアレイと同様に0から始まります。
.carousel（ "prev"）：前のフレームに戻ります。
.carousel（ "next"）：次のフレーム
データ属性を使用して、カルーセルを制御します。
<！Doctype html> <html> <head> <title> bootstrapインスタンス - カルーセルプラグインメソッド</title> <link href = "http://libs.baidu.com/bootstrap/3.0.3/css/boottrap.min.css src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script> <script src = "http://libs.baidu.com/bootstrap/3.0.3/js/js/boottrap.min.js data-rap = "true" data-interval = "1000"> <！ - carousel indicator-> <ol> <li data-target = "＃mycarousel" data-slide-= "0"> </li> <li date-target = "＃mycarousel" data-slide-to = "1" 1 "> </ol> <！ - Carousel Project-> <div> <div> <img src = "/wp-content/uploads/2014/07/slide1.png"> </div> <div> <img src = "/wp-content/uploads/2014/07/slide2.png src = "/wp-content/uploads/2014/07/slide3.png"> </div> </div> <！ - carousel navigation-> <a href = "＃mycarousel" data-slide = "prev"> ‹</a> <a href = "＃mycarousel" control " style = "text-align：center;"> <入力タイプ= "ボタン" value = "start"> <input type = "button" value = "pause"> <input type = "button" "value" = "> <入力タイプ="ボタン "値"値 "> <入力タイプ="ボタン "値"値 "値="スライド1 "> <入力ボタン</div> </div> </body> </html>
宣言方法は、カルーセルの位置を簡単に制御できるデータ属性を定義することにより実装されます。主に次のタイプが含まれています。
1。データライドプロパティ：値カルーセルを取り、カルーセルで定義します。
2。データターゲットプロパティ：値カルーセルで定義されたID名またはその他のスタイルの識別子を取得します。前の例に示すように、値を「#slidershow」として取得し、Carouselカウンターの各LIで定義します。
3。データスライド属性：値にはprev、次へ、前の平均は後方にスクロールすること、次には前方にスクロールすることが含まれます。このプロパティ値は、CarouselコントローラーのAリンクでも定義されており、コントローラーHREF値はID名またはコンテナ4のその他のスタイル識別子に設定されます。
5。データスライドと属性：この指定されたフレームに直接リダイレクトできるデータスライド= "2"など、特定のフレームの添え字を渡すために使用されます（サブスクリプトは0から始まります）。また、カルーセルカウンターの各LIで定義されます。
ここでは、#SliderShowレイヤーにスライドスタイルを追加し、画像と画像の切り替え効果をスムーズに使用できることに注意する必要があります。
<div id = "slidershow" data-ride = "carousel"> ... </div>
Data-Ride = "Carousel"、Data-Slide、およびData-Slide-Toに加えて、Carouselコンポーネントは他の3つのカスタムプロパティもサポートしています。
次のコードは「Carouselは継続的にループしません」と「Carousel Time間隔は1秒です」を実装します。
<div id = "slidershow" data-ride = "carousel" data-rap = "false" data-interval = "1000"> .... </div>
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラップテーブルの使用チュートリアル
ブートストラッププラグインの使用チュートリアル
素晴らしいトピックの共有：jQueryの写真カルーセルjavascript写真カルーセルブートストラップ写真カルーセル
上記は、JavaScript Picture Carouselの詳細な紹介です。この記事がJavaScriptプログラミングを学習する際にすべての人に役立つことを願っています。