如何用Bootstrap製作輪播圖

Bootstrap是目前流行的一個很受開發者歡迎的前端框架,它的特點是方便使用、靈活而又簡潔。使用它,我們的開發者們再也不用為繁瑣的前端頁面布局而費盡心思了,從而讓我們的開發效率大大提升。同樣,對於比較複雜的輪播圖的製作,同樣可以通過bootstrap製作,從而變得簡單迅速。本文通過一個簡單的實例來為大家介紹如何用Bootstrap製作輪播圖,希望對大家有所幫助。

工具/原料

Bootstrap庫文件 JQuery庫文件
Sublime Text 3編輯器 (也可選擇其他編輯器)
Google Chrome瀏覽器 (或其他瀏覽器)

方法/步驟

前端用到的編輯器有很多,本例通過選擇Sublime Text3編輯器來實現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="width:100%;" />

</div>

</div>

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

<div class="item active">

<img src="images/1.jpg" alt="" style="width:100%;" />

<!-- 添加對應的標題和內容 -->

<div class="carousel-caption">

<h4>標題一</h4>

<p>hello,i am tom!</p>

</div>

</div>

第七步,設計輪播圖片的前後圖標控制器。我們平時看到的輪播圖會有一個向前播放和向後播放的控制器。在Carousel中加一個控制向前和一個控制向右的a標籤,並添加名為「carousel-control」的類,以及leftright類。其中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框架,只通過簡單的添加類樣式,就完成了比較複雜的輪播圖,是不是很強大呢?讀者可以自行實踐。

附:本經驗關鍵詞:怎樣做輪播圖、輪播圖怎麼做、輪播圖實現原理、輪播圖自動播放、圖片輪播怎麼做、怎樣製作圖片輪播、bootstrap如何製作圖片輪播、bootstrap怎麼製作輪播圖、bootstrap輪播圖、bootstrap製作輪播圖。

附:可以在下面「添加經驗引用」參考我的另一篇經驗「JS製作輪播圖

更多與「bootstrap」相關經驗請點擊下面的「經驗引用」或添加關注。

32JS製作輪播圖

15Bootstrap實現流動布局實例

21Bootstrap實現簡單布局實例

注意事項

注意要引入jQuery庫和Bootstrap庫文件,並且jQuery庫要放在的Bootstrap庫文件上面,不然不會有效果的。讀者可以自行實踐。
關於輪播圖的其他製作方法,請查看我的另一篇經驗「JS製作輪播圖」。
如果您覺得這篇經驗對您有幫助,麻煩給小編點個讚,投個票;如果您想查看更多我的經驗,請點擊上方我的頭像下的「關注」或直接點擊頭像旁的暱稱。當然,您也可以點擊右下方的雙箭頭分享給好友。感謝您的支持!

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場