首頁  >  文章  >  web前端  >  bootstrap框架實作自動輪播圖的程式碼

bootstrap框架實作自動輪播圖的程式碼

yulia
yulia原創
2018-10-19 11:49:287299瀏覽

大家在瀏覽網站時有沒有發現,幾乎每個網站的首頁都有輪播圖,作為一個前端開發人員,你會用bootstrap框架寫圖片輪播嗎?這篇文章就跟大家分享bootstrap框架實現自動輪播的程式碼,有一定的參考價值,有興趣的朋友可以看看。

在使用bootstrap框架佈局前,一定要先引入相關的jQuery,CSS,JS文件,不清楚的小伙伴可以看看我以前寫文章,如何在HTML頁面中使用bootstrap框架,或參考Bootstrap教學

bootstrap實現自動輪播圖的程式碼如下:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>  
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <div id="myCarousel" class="carousel slide" style="width: 500px;" data-ride = "carousel" data-interval="1000">
   <!-- 轮播(Carousel)指标 -->
   <ol class="carousel-indicators">
    <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>   
   <!-- 轮播(Carousel)项目 -->
   <div class="carousel-inner" >
    <div class="item active">
     <img src="img/aaa1.jpg" alt="First slide">
    </div>
    <div class="item">
     <img src="img/aaa2.jpg" alt="Second slide">
    </div>
    <div class="item">
     <img src="img/aaa3.jpg" alt="Third slide">
    </div>
   </div>
   <!-- 轮播(Carousel)导航 -->
   <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    
   </a>
   <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    
   </a>
  </div> 
 </body>
</html>

      標籤的功能:在輪播圖中顯示多個圓圈,提示總共有幾張圖片,以及目前是第幾張圖片。

    標籤的作用:可以用滑鼠點擊圖片的左邊,查看前一張圖片,點擊圖片的右邊查看後一張圖片。

    在最外層的div中加上data-ride = "carousel" data-interval="1000",可以實現圖片自動輪播的效果,data-interval可以設定輪播的速度,實例用的1000毫秒,一秒等於一千毫秒。

    大家可以依照自己的需求修改輪播圖的樣式,例如圖片切換速度等。

    效果如圖所示:

    bootstrap框架實作自動輪播圖的程式碼

    以上給大家分享了bootstrap框架實作圖片輪播的程式碼,比較簡單,如有不清楚的可以造訪bootstrap框架官網:http://v3.bootcss.com,希望這篇文章對你有幫助!更多相關教學請造訪Bootstrap線上手冊

以上是bootstrap框架實作自動輪播圖的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn