工具/材料

Sublime Text

操作方法

• 01

  首先我們需要新建一個(gè)HTML5的文檔，然后在文檔中導(dǎo)入Bootstrap的樣式文件，這個(gè)文件中包含了輪播圖所有的樣式定義，如下圖所示

  
• 02

  接下來我們需要導(dǎo)入腳本文件，注意先導(dǎo)入Jquery文件，然后導(dǎo)入bootstrap的腳本文件，順序一定不能顛倒，如下圖所示

  
• 03

  然后在body標(biāo)簽里定義輪播圖的容器，容器的大小需要和圖片的大小一樣，否則會(huì)出現(xiàn)輪播圖錯(cuò)位，效果如下圖所示

  
• 04

  接下來我們就正式的添加輪播圖了，這里先添加三張圖，如下圖所示，注意讓哪種輪播圖顯示直接調(diào)用Bootstrap的active樣式即可

  
• 05

  輪播圖片添加完畢以后，就可以添加輪播圖焦點(diǎn)了。在Bootstrap中運(yùn)用li列表定義輪播圖焦點(diǎn)，注意焦點(diǎn)的數(shù)量和圖片的數(shù)量要一樣，如下圖所示

  
• 06

  輪播圖中還有一個(gè)必不可少的元素就是左右箭頭，通過Bootstrap的carousel-control樣式添加輪播圖箭頭，如下圖所示

  
• 07

  最后我們運(yùn)行程序以后，在頁面中你就可以看到如下圖所示的輪播圖效果了?？梢钥吹轿覀兩厦嬲f的輪播圖焦點(diǎn)和左右箭頭都在頁面上顯示出來了，如下圖所示