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

这篇文章将为大家详细讲解有关BootStrap中jQuery插件Carousel如何实现轮播广告效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

下图为最终效果：

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

<div class="carousel slide" data-ride="carousel" id="carousel" data-interval="3000"> //data-interval设置轮播间隔为3秒钟  <!-- 广告序号指示器(表示当前第几张的下方的几个小圆圈)，可加可不加 -->  <ol class="carousel-indicators">   <li data-target="#carousel" data-slide-to="0"></li>   <li data-target="#carousel" data-slide-to="1" class="active"></li>   <li data-target="#carousel" data-slide-to="2"></li>   <li data-target="#carousel" data-slide-to="3"></li>  </ol>  <div class="carousel-inner">   <div class="item">    <img src="img/02.jpg" alt=""/>    <!-- 为广告添加说明文字，在图片上中下方显示，可加可不加 -->    <div class="carousel-caption">     <h4>First slide label</h4>     <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>    </div>   </div>   <div class="item active">    <img src="img/03.jpg" alt=""/>    <!-- 为广告添加说明文字，在图片上中下方显示，可加可不加 -->    <div class="carousel-caption">     <h4>Second slide label</h4>     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>    </div>   </div>   <div class="item">    <img src="img/04.jpg" alt=""/>    <!-- 为广告添加说明文字，在图片上中下方显示，可加可不加 -->    <div class="carousel-caption">     <h4>Third slide label</h4>     <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>    </div>   </div>   <div class="item">    <img src="img/05.jpg" alt=""/>    <!-- 为广告添加说明文字，在图片上中下方显示，可加可不加 -->    <div class="carousel-caption">     <h4>Fourth slide label</h4>     <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>    </div>   </div>  </div>  <!-- 上一张的按钮，可加可不加 -->  <a class="left carousel-control" href="#carousel" rel="external nofollow" rel="external nofollow" data-slide="prev">   <span class="glyphicon glyphicon-chevron-left"></span>  </a>  <!-- 下一张的按钮，可加可不加 -->  <a class="right carousel-control" href="#carousel" rel="external nofollow" rel="external nofollow" data-slide="next">   <span class="glyphicon glyphicon-chevron-right"></span>  </a> </div>

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

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

关于“BootStrap中jQuery插件Carousel如何实现轮播广告效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。