bootstrap的輪播圖怎麼實現

第一步，打開電腦中安裝的Sublime Text3，新建demo資料夾用來存放文件，在裡面新建一個html文件，透過Tab快捷鍵迅速建立一個html模板，並命名標題。如圖：

第二步，在頂部head標籤中引入外部JQuery和Bootstrap庫檔案。下載好相關的庫檔案後，放在對應的資料夾裡。我們將JS檔案放在Body標籤底部。注意要引入jQuery庫，因為Bootstrap框架是以jQuery庫檔案為基礎的。並且要放在的Bootstrap庫檔案上面，不然不會有效果。如圖：

第三步，新增輪播圖片的容器。為了方便查看，在最外邊添加一個“container”的div，再加一個子div，類別名為carousel，並且給這個容器定義一個名為“slidershow”的ID，方便後面的data屬性來聲明觸發。

<div id="slidershow" class="carousel"></div>

第四步，設計輪播圖片的計數器。在容器內部新增計數器，加上一個名為「carousel-indicators」的類，用來顯示圖片的播放順序。其中，data-target="#slidershow" ，用於觸發聲明事件的目標。程式碼如下：

<ol class="carousel-indicators">
    <li class="active" data-target="#slidershow" data-slide-to="0"></li>
    <li data-target="#slidershow" data-slide-to="1"></li>
    <li data-target="#slidershow" data-slide-to="2"></li>
    <li data-target="#slidershow" data-slide-to="3"></li>      
</ol>

第五步，設計輪播圖片的播放區域。這個區域主要用來放輪播的圖片。加上一個名為“carousel-inner”的類，並放置在carousel容器中，再加一個名為“item”的容器來放置每張輪播圖片。程式碼如下：

<div class="carousel-inner">
    <div class="item active">
    <img src="images/1.jpg" alt=""   style="max-width:90%" />      
    </div>     
</div>

相關推薦：《bootstrap入門教學》

第六步，如果需要在每張圖片上新增對應的標題和內容，只要在item中加上一個名為「carousel-caption」的div的類別。類似，接著依序添加幾張輪播的圖片，注意，為了美觀，可以將圖片的寬度設定為100%。程式碼如下：

<div class="item active">
    <img src="images/1.jpg" alt=""   style="max-width:90%" />
    <!-- 添加对应的标题和内容 -->
    <div class="carousel-caption">
    <h4>标题一</h4>
    <p>hello,i am tom!</p>
    </div>
</div>

第七步，設計輪播圖片的前後圖示控制器。我們平常看到的輪播圖會有一個向前播放和向後播放的控制器。在Carousel中加一個控制向前和一個控制向右的a標籤，並添加名為“carousel-control”的類，以及left和right類。其中left表示向前播放，right表示向後播放。程式碼如下：

<a href="#slidershow" data-slide="prev" class="left carousel-control" role="button">
<span class="glyphicon glyphicon-chevron-left">
</span>
</a> 
<a href="#slidershow" data-slide="next" class="right carousel-control" role="button">
<span class="glyphicon glyphicon-chevron-right">
</span>
</a>

第八步，在瀏覽器中查看，基本的效果就出來了。為了讓使用者體驗更加友好，在設計輪播圖片的播放時，在第一張圖片加一個“active”類，預設頁面載入時顯示第一張圖片；為ID為“slidershow ”的div添加“slide”類，作用是使圖片與圖片的切換具有平滑感。

第九步，完整的程式碼就完成了。我們檢查程式碼無誤後，右鍵文件，在瀏覽器中查看效果，效果如圖所示（其實每寫完一步程式碼就應該查看效果，即調試。）。利用bootstrap框架，只透過簡單的添加類別樣式，就完成了比較複雜的輪播圖。

以上是bootstrap的輪播圖怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！