bootstrap輪播圖範例程式碼分享，bootstrap範例程式碼

最後更新：2017-05-22 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體為大家分享了bootstrap輪播圖的具體代碼，供大家參考，具體內容如下

<!DOCTYPE html> <html lang="zh-CN"> <head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">  <title>XXX</title>  <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">  <link rel="stylesheet" href="css/main.css">  <!--[if lt IE 9]>  <script src="lib/html5shiv/html5shiv.min.js"></script>  <script src="lib/respond/respond.min.js"></script>  <![endif]--> </head> <body> <!--輪播器  1、給最外層添加 ：id="myCarousel" class="carousel slide"  2、給輪播器3張圖片的最外層div添加 ：class="carousel-inner" 給每張圖片的父div添加 class="item"   並且第一張首選 加active  3、給ol添加class="carousel-indicators" 然後每個li添加綁定 data-target="#myCarousel"    data-slide-to=0,1,2 並且第一個首選 加active  4、限定寬度和圖片一樣寬，給最外層div添加 style="width: 900px;" （900為圖片寬度）  5、給兩邊控制按鈕的第一個加上：href="#myCarousel" class="left carousel-control" data-slide="prev"   第二個加上 href="#myCarousel" class="right carousel-control" data-slide="next"  --> <div id="myCarousel" class="carousel slide" style="width: 900px;">      <!--data-ride="carousel"--> <!--<div id="myCarousel" class="carousel slide" style="width: 900px;" data-ride="carousel">--><!--自動輪播，預設5秒-->  <ol class="carousel-indicators"><!--輪播器中間3個點-->   <li data-target="#myCarousel" data-slide-to="0" class="active"></li>   <li data-target="#myCarousel" data-slide-to="1"></li>   <li data-target="#myCarousel" data-slide-to="2"></li>  </ol>  <div class="carousel-inner"><!--輪播器3張圖片-->   <div class="item active">    <img src="img/slide1.png" alt="第1張圖片">    <div class="carousel-caption"> <!--可以給輪播圖添加文字-->     <h3>標題</h3>     <p>我是內容</p>    </div>   </div>   <div class="item">    <img src="img/slide2.png" alt="第2張圖片">   </div>   <div class="item">    <img src="img/slide3.png" alt="第3張圖片">   </div>  </div>  <!--輪播器兩邊控制按鈕-->  <a href="#myCarousel" class="left carousel-control" data-slide="prev">   <span class="glyphicon glyphicon-chevron-left"></span>  </a>  <a href="#myCarousel" class="right carousel-control" data-slide="next">   <span class="glyphicon glyphicon-chevron-right"></span>  </a> </div> <script src="lib/jquery/jquery.js"></script> <script src="lib/bootstrap/js/bootstrap.js"></script> <script src="js/main.js"></script> <script> // $('#myCarousel').carousel();/*自動輪播，預設5秒*/     $('#myCarousel').carousel({   interval:3000 , /* 設定自動輪播時間*/   pause:'hover',/*設定暫停事件，預設就是滑鼠移入輪播圖就暫停，移出繼續，所以可以不用寫*/   /*wrap:false*/ /*只播一次，預設true，迴圈一直輪播*/  });     /*其他方法  * cycle 迴圈各幀(預設從左至右)   pause 停止輪播   number 輪播到指定的圖片上(小標從 0 開始，類似數組)   prev 迴圈輪播到上一個項目   next 迴圈輪播到下一個項目  *  *  * //點擊按鈕執行   $('button').on('click', function () {   //點擊後，自動播放   $('#myCarousel').carousel('cycle');   //其他雷同   }  * */   //事件 $('#myCarousel').on('slide.bs.carousel', function () {  alert('當調用 slide 執行個體方式時立即觸發'); }); $('#myCarousel').on('slid.bs.carousel', function () {  alert('當輪播完成一個投影片觸發'); }); </script> </body>  </html>

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More