如何用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製作輪播圖」。
如果您覺得這篇經驗對您有幫助,麻煩給小編點個讚,投個票;如果您想查看更多我的經驗,請點擊上方我的頭像下的「關注」或直接點擊頭像旁的暱稱。當然,您也可以點擊右下方的雙箭頭分享給好友。感謝您的支持!

相關文章

  1. js jq製作輪播圖

    現在很多網站都有輪播圖效果,我們可以自己製作出輪播圖,也可以使用網上現有的,但是作為一個程式設計師來說,肯定是想自己做一個輪播圖. 工具/原料 幾張尺寸一樣的圖片 jp庫文件 webstrom或者drea ...
  2. JS製作輪播圖

    每當我們在各種網站上瀏覽信息時,細心的朋友可能會注意到,很多網站首頁都會有很酷的圖片輪流播放效果,這就是我們說的"輪播圖".例如天貓商城,我們看到,精美的圖片每隔幾秒後自動輪播.這 ...
  3. PS製作輪播圖左右按鈕

    在輪播圖中經常看到左右按鈕,有些箭頭樣式是透明的,今天我們就來簡單製作下. 工具/原料 ps 方法/步驟 在畫布中,選擇圓角矩形工具繪製一個圓角矩形,填充一個灰色,描邊關閉 然後在選擇矩形的情況下,按 ...
  4. 使用Axure 8製作輪播圖效果

    輪播圖是現在網頁應用或APP應用使用頻率較高的交互展現方式,Axure可以使用動態面板進行交互用例的編寫即可實現自動輪播或點擊輪播的效果. 工具/原料 Axure 8 3張圖片800*449 方法/步 ...
  5. 進來都會製作淘寶寬屏輪播圖

    越來越多的淘寶賣家在追求店鋪的美觀  而淘寶自身只有950*600的  但是很多賣家的輪播圖卻是寬屏輪播圖  下面來分享一下我的製作過程吧 工具/原料 製作三張1920*600的或者是1440*500 ...
  6. 怎樣使用axure 7.0製作banner輪播圖

    隨著手機端app的發展,越來越多琳琅滿目的app應用層出不窮.每一款app成型之前都會有相應的原型的.那麼你知道怎麼使用Axure7.0軟體製作高大上的輪播圖效果嗎?小編來告訴你. 工具/原料 Axu ...
  7. 淘寶手機端大輪播圖的製作方法

    淘寶手機端大輪播圖的製作方法 工具/原料 淘寶 淘寶 方法/步驟 首先是打開無線淘寶後台.點擊店鋪首頁 手機淘寶店鋪首頁編輯.進入淘寶手機端編輯.普通頁面輪播圖尺寸是640x320 想做大輪播圖只能開 ...
  8. 製作半透明無縫遮罩效果輪播圖

    全屏輪播.兩則半透明,顯示的是上一張和下一張圖片的一半.無縫滾動,自動切換.需要可以投我一票,然後私信,從我的百度雲盤直接下載模板回來就可以改成自己想要的了! 工具/原料 Adobe Dreamwea ...
  9. 淘寶旺鋪專業版如何製作全屏海報輪播圖店招

    淘寶專業版旺鋪製作全屏海報的經驗,只要會上網都會做 工具/原料 淘寶專業版網店一個 圖片處理軟體一個(美圖,ps都可以) 方法/步驟 首先我們進入淘寶專業版店鋪的裝修頁面,看到以下界面(圖1) 這裡需 ...
  10. 淘寶店鋪首頁全屏輪播圖製作

    很多朋友都想要做全屏輪播圖,接下來我來說說我的經驗 工具/原料 美圖秀秀 方法/步驟 1.首先要製作或者搜尋圖片寬度1920高度610的高畫質圖片 2.上傳到淘寶圖片空間,並複製其連接 3.將複製的連 ...
  11. 技術乾貨:bootstrap框架實現輪播圖

    輪播圖的框架實現方法 工具/原料 Hbuilder或Dreamweaver編輯器 方法/步驟 bootstrap框架提供了快速.強大的輪播圖功能,只要熟悉輪播圖的相關類,就可以輕鬆實現需要的效果. 案 ...
  12. bootstrap輪播圖;輪播圖插件

    bootstrap是一個很流行的響應式布局框架,可以bootstrap進行快速搭建項目.bootstrap提供了很多實用的功能,比如常用的輪播圖功能.下面我們一起來看一下如何使用bootstrap框架 ...
  13. jQuery怎樣製作淡入淡出輪播圖

    jQuery淡入淡出輪播圖相比起滑動輪播圖來說還是很簡單滴喲.今天小編我就來分享一下jQuery怎樣製作淡入淡出輪播圖的經驗給大家. 工具/原料 電腦 Hbuilder jQuery 輪播圖源碼連結: ...
  14. js輪播圖如何用事件綁定實現

    js輪播圖如何用事件綁定實現 工具/原料 js 方法/步驟 1.css樣式代碼 2.html代碼載入要輪播的圖片 3.js代碼:獲取images元素生成字符串數組,字符串數組不能進行push pop ...
  15. 微企點輪播圖使用指南

    輪播圖的炫酷效果很引人注意. 工具/原料 電腦 瀏覽器 方法/步驟 輪播圖控制項選擇.選擇之後拖拽到編輯器中. 輪播圖設置.點擊"設置"圖標,進入輪播圖設置區:用戶可以對輪播圖的橫幅 ...
  16. 《PPT使用技巧》如何用PPT製作太極八卦圖

    上篇我們分享了如何製作新浪logo.是需要我們手工去調整圖形大小會造成偏差,今天我們分享下如何利用圖片的剪切來製作八卦圖. 方法/步驟 首先我們插入一個圓,填充顏色黑色. 複製這個圓,設置大小格式縮小 ...
  17. 如何用PS製作文字肖像圖?ps用文字組成人物頭像

    我們看到有些海報上的人物是用文字組成出來的,如下圖中所示的效果.這種圖可以用PS軟體製作出來,在製作過程中,我們需要運用到蓋印圖層.閾值.蒙版.筆刷等的技巧.下面,我們一起來看下具體製作方法. 工具/ ...
  18. 【Dreamweaver教程】怎樣製作輪播廣告

    輪播廣告指的是隨機播放的一組圖片,我們經常用這種方式來設計網站上的廣告. 步驟/方法 首先打開你的dw,按快捷鍵ctrl+n創建一個新的網頁. 點菜單欄上的表格,插入一個表格. 在屬性欄設置表格的寬和 ...
  19. 如何用可牛製作動感閃圖

          每當,看到一些漂亮的動感閃圖,心中不由自主地湧現出一股製作的衝動,於是對自己講,要是我能製作屬於自己喜歡的動感閃圖,那該有多好啊!如今我終於會了,只要將自己最喜歡的一張圖片或照片,製作出你 ...
  20. 如何用ps製作gif動態圖

    Adobe Photoshop,簡稱"PS",是由Adobe Systems開發和發行的圖像處理軟體. 工具/原料 電腦一台 photoshop cs3 (其他版本也可以) 方法/ ...