BootStrap中jQuery插件Carousel實(shí)現(xiàn)輪播廣告效果

第BootStrap中jQuery插件Carousel實(shí)現(xiàn)輪播廣告效果輪播廣告在網(wǎng)站中的應(yīng)用實(shí)在是太常見了，下面說一說怎樣使用bootstrap中的Carousel插件來實(shí)現(xiàn)輪播廣告效果，下圖為最終效果：

具體實(shí)現(xiàn)方法請(qǐng)看下面的代碼：

divdata-ride="carousel"id="carousel"data-interval="3000"http://data-interval設(shè)置輪播間隔為3秒鐘

!--廣告序號(hào)指示器(表示當(dāng)前第幾張的下方的幾個(gè)小圓圈)，可加可不加--

lidata-target="#carousel"data-slide-to="0"/li

lidata-target="#carousel"data-slide-to="1"/li

lidata-target="#carousel"data-slide-to="2"/li

lidata-target="#carousel"data-slide-to="3"/li

/ol

div

div

imgsrc="img/02.jpg"alt=""/

!--為廣告添加說明文字，在圖片上中下方顯示，可加可不加--

div

h3Firstslidelabel/h3

pNullavitaeelitlibero,apharetraauguemollisinterdum./p

/div

/div

div

imgsrc="img/03.jpg"alt=""/

!--為廣告添加說明文字，在圖片上中下方顯示，可加可不加--

div

h3Secondslidelabel/h3

pLoremipsumdolorsitamet,consecteturadipiscingelit./p

/div

/div

div

imgsrc="img/04.jpg"alt=""/

!--為廣告添加說明文字，在圖片上中下方顯示，可加可不加--

div

h3Thirdslidelabel/h3

pPraesentcommodocursusmagna,velscelerisquenislconsectetur./p

/div

/div

div

imgsrc="img/05.jpg"alt=""/

!--為廣告添加說明文字，在圖片上中下方顯示，可加可不加--

div

h3Fourthslidelabel/h3

pNullavitaeelitlibero,apharetraauguemollisinterdum./p

/div

/div

/div

!--上一張的按鈕，可加可不加--

ahref="#carousel"rel="externalnofollow"rel="externalnofollow"data-slide="prev"

span/span

!--下一張的按鈕，可加可不加--

ahref="#carousel"rel="externalnofollow"rel="externalnofollow"data-slide="next"

span/span

/div

如代碼中注釋，廣告序號(hào)指示器，廣告的說明文字，以及上一張、下一張的按鈕都是可以根據(jù)需要自行添加的。

可以在carousel類中添加data-interval擴(kuò)展屬性來更改輪播的時(shí)間間隔。

以上所述是小編給大家介