BootStrap中jQuery插件Carousel实现轮播广告效果

第BootStrap中jQuery插件Carousel实现轮播广告效果轮播广告在网站中的应用实在是太常见了，下面说一说怎样使用bootstrap中的Carousel插件来实现轮播广告效果，下图为最终效果：

具体实现方法请看下面的代码：

divdata-ride="carousel"id="carousel"data-interval="3000"//data-interval设置轮播间隔为3秒钟

!--广告序号指示器(表示当前第几张的下方的几个小圆圈)，可加可不加--

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

如代码中注释，广告序号指示器，广告的说明文字，以及上一张、下一张的按钮都是可以根据需要自行添加的。

可以在carousel类中添加data-interval扩展属性来更改轮播的时间间隔。

以上所述是小编给大家介