使用过bootstrap框架的都能够清楚地认识到其中的专业性，同样的广告轮播功能，如果使用原生纯JavaScript来写，其中的实现过程跟代码都会非常繁杂，但是如果能够引入bootstrap框架，那么实现起来就会变得非常简单，而且看起来也会更加专业与美观,效果如图：

 

上面两个图片是其中的效果图，其中分为三个部分，其一是图片部分；其二是左右两边的箭头按钮，点击可以左右切换图片；其三是中下方的圆点，点击可以按照指定的顺序来切换图片；

接下来是代码实现部分：

<p data-ride="carousel" id="carousel_container" class="carousel slide">

  <!--图片容器 -->

  <p class="carousel-inner">

  <p class="item">

  <img src="holder.js/100px500?text=第一张广告图&random=yes"/>

  <p class="carousel-caption">

  <h1>标题</h1>

  <p>这里是图片说明内容</p>

  </p>

  </p>

  <p class="item active"><img src="holder.js/100px500?text=第二张广告图&random=yes" /></p>

  <p class="item"><img src="holder.js/100px500?text=第三张广告图&random=yes"/></p>

  </p>

  <!--小圆圈容器 -->

  <ol class="carousel-indicators">

  <li data-slide-to="0" data-target="#carousel_container"></li>

  <li data-slide-to="1" data-target="#carousel_container"></li>

  <li data-slide-to="2" data-target="#carousel_container"></li>

  </ol>

  <!--左右按钮容器 -->

  <a href="#carousel_container" data-slide="prev" class="left carousel-control">

  <span class="glyphicon glyphicon-chevron-left"></span>

  </a>

  <a href="#carousel_container" data-slide="next" class="right carousel-control">

  <span class="glyphicon glyphicon-chevron-right"></span>

  </a>

</p>

这是轮播广告的实现代码，只要引入了bootstrap框架，就可以使用其中的.carousel等相关的类，然后就能快速地做出一个非常漂亮的轮播广告图，其中用到的每个data属性都和js代码相关，是实现切换的必须属性，并且都是已经被定义好在框架之中的，直接拿来用就可以了。

总结：以上代码短小精悍，其中用到的一些图标也都是bootstrap框架中提供的不会失真小图标，bootstrap的小图标库非常丰富，其中还有各种各样的css组件与js插件，效果也非常漂亮，使用这个框架来开发一些跨设备的网页将会让你事半功倍！