まず、ブートストラップの写真カルーセルをお見せします。効果は次のとおりです。効果がかなり良いと感じた場合は、読み続けて実装コードを参照してください。
私はそれほどナンセンスとは言いません、私はあなたにコードを投稿するだけです。特定のコードは次のとおりです。
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua互換" content = "ie = edge"> <meta name = "viewport" content = "width =" width = bed "他のコンテンツは *それらに従う必要があります！ - > <title> picture carousel_01 </title> <！ - bootstrap-> <link href = "../ bootstrap-3.5-dist/css/bootstrap.min.css" rel = "styleSheet"> <script src = "../ js/jquery-2.1. src = "../ bootstrap-3.3.5-dist/js/bootstrap.min.js"> </script> </head> <body> <！ - 著者：カイル時刻：2016-02-20説明：Carouseldate-interval = "4000" dwell time/quict id = "Carousel-example-generic"> <ol> <li data-target = "＃carousel-example-generic" slide-to = "0"> </li> <li data-target = "＃carousel-example-generic" data-slide-to = "1"> </li> <li datapleers = "carousele-example"> </li> </li> </li data-target = "＃carousel-example-generic" data-slide-to = "1"> </li> <li data-target = "＃carousel-example-generic" data-slide-to = "2"> </li> <li data-target = " src = "../ img/picture carousel/pic01.jpg"/> </div> <div> <img src = "../ picture carousel/pic02.jpg"/> <！ - 画像に表示されるテキスト - > <div> <h3> lenovoキャンパスアンバサドルsrc = "../ img/picture carousel/pic03.jpg"/> </div> <div> <img src = "../ picture carousel/pic04.jpg"/> </div> <！ - controls-> <a href = "＃carousel-example-generic"役割= " aria-hidden = "true"> </span> <span>前</span> </a> <a href = "＃carousel-example-generic" role = "button" data-slide = "next"> <span aria-hidden = "true"> </span> <span> next </span> </a>人間の介入なしの属性設定 - > <script> $（ "。Carousel"）。Carousel（{interval：4000}）</script> </body> </html>上記は、編集者が紹介したブートストラップに基づいたブートストラップベースの画像カルーセル効果ディスプレイのサンプルコードです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！