工具/材料SublimeText
操作方法01、首先我們需要新建一個HTML5的文檔，然后在文檔中導(dǎo)入Bootstrap的樣式文件，這個文件中包含了輪播圖所有的樣式定義，如下圖所示
02、接下來我們需要導(dǎo)入腳本文件，注意先導(dǎo)入Jquery文件，然后導(dǎo)入bootstrap的腳本文件，順序一定不能顛倒，如下圖所示
03、然后在body標簽里定義輪播圖的容器，容器的大小需要和圖片的大小一樣，否則會出現(xiàn)輪播圖錯位，效果如下圖所示
04、接下來我們就正式的添加輪播圖了 ， 這里先添加三張圖，如下圖所示，注意讓哪種輪播圖顯示直接調(diào)用Bootstrap的active樣式即可
05、輪播圖片添加完畢以后 ， 就可以添加輪播圖焦點了 。在Bootstrap中運用li列表定義輪播圖焦點，注意焦點的數(shù)量和圖片的數(shù)量要一樣 ， 如下圖所示
06、輪播圖中還有一個必不可少的元素就是左右箭頭，通過Bootstrap的carousel-control樣式添加輪播圖箭頭，如下圖所示
【如何用Bootstrap制作輪播圖】07、最后我們運行程序以后，在頁面中你就可以看到如下圖所示的輪播圖效果了 ?？梢钥吹轿覀兩厦嬲f的輪播圖焦點和左右箭頭都在頁面上顯示出來了，如下圖所示
推薦閱讀
- SWF視頻格式如何才能轉(zhuǎn)換MP4格式呢？
- Excel如何制作圖表
- 如何應(yīng)用JavaScript中的彈窗
- 如何圈出圖片中重點，做標記
- ppt如何打印滿在一張a4紙上
- CAD中如何設(shè)置打印輸出的顏色？
- 如何畫出正六邊形
- 如何用PS為證件照更換底色背景色
- 如何在excel表格中把兩組數(shù)據(jù)相減？
- 2010版excel：如何進行高級篩選