歡迎點擊「算法與編程之美」↑關注我們！
本文首發於微信公衆號："算法與編程之美"，歡迎關注，及時瞭解更多此係列文章。
歡迎加入團隊圈子！與作者面對面！直接點擊！
1.Bootstrap輪播（Carousel）插件
Bootstrap 輪播（Carousel）插件是一種靈活的響應式的向站點添加滑塊的方式。除此之外，內容也是足夠靈活的，可以是圖像、內嵌框架、視頻或者其他您想要放置的任何類型的內容。要使用Bootstrap，需要先引入Bootstrap的相關文件。
圖1.1 引入Bootstrap的相關文件
2.輪播圖三要素：小圓圈、圖片、左右按鈕
圖1.2 輪播圖代碼
3.輪播圖組件註解
（1）data-ride=”carousel”:觸發輪播動作，實現自動播放，用於標記輪播在頁面加載時就開始動畫播放
（2）data-intarval=”1000”:表示播放的時間間隔，單位毫秒，默認值5000
（3）data-wrap=”true”:表示循環播放，如果是false會停止到最後一張
（4）data-pause=”hover”:表示暫停（默認），鼠標移上去暫停到當前幻燈片，還有false屬性
（5）class="carousel-indicators":圓點樣式，直接使用，Bootstrap組件
（6）data-target：指向事件的目標，即要觸發的元素
（7）data-slide-to：向輪播傳遞一個滑動索引，把滑塊移動到一個特定的索引，從0開始計數
（8）data-slide：接受關鍵字prev或next，用來改變幻燈片的位置
（9）class="left carousel-control" 表示用左邊修飾的class
（10）class="glyphicon glyphicon-chevron-left" 表示左箭頭
（11）role="button"將a元素轉換爲button按鈕功能進行使用
（12）aria-hidden="true" 圖標的可訪問性,避免混淆的輸出內容，圖標沒必要被類似屏幕閱讀器的設備訪問，hidden就是對其隱藏
（13）class="sr-only"主要用於增強可訪問性，能保證屏幕閱讀器正確讀取且不會影響 UI的視覺呈現
（14）圖片上的div加上相應的class名字，直接調用bootstrap組件，有相應的js代碼和css代碼，可以直接觸發執行。
END
主 編 | 王文星
責 編 | 朱 佳
where2go 團隊
微信號：算法與編程之美
長按識別二維碼關注我們!
溫馨提示：點擊頁面右下角“寫留言”發表評論，期待您的參與！期待您的轉發！