基于bootstrap3全屏宽度的响应式jQuery幻灯片特效

这是一款效果非常酷的基于Bootstrap3.x和HTML5的响应式全屏宽度jQuery幻灯片特效。该Bootstrap幻灯片特效能自适应屏幕的宽度，使用HTML5的data属性来指定幻灯片所需的各种属性。使用简单，界面美观大方。

该幻灯片特效使用的只是jQuery、Boostrap3.x和HTML5，除此之外没有任何其它外部依赖。

使用方法

使用这个jQuery幻灯片插件首先要引入jQuery和Boostrap3所需的文件。可以从CDN节点上调用Bootstrap3文件。

<link type="text/css" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
              

HTML结构

该jQuery幻灯片的基本HTML结构如下：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        ......
    </ol>

    <div class="carousel-inner">
        ......
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">...</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">...</a>
</div><!-- /.carousel -->                
              

幻灯片图片部分的HTML结构如下：

<div class="carousel-inner">
  <div class="item active"> <img src="3.jpg" style="width:100%" data-src="holder.js/900x500/auto/#7cbf00:#fff/text: " alt="First slide">
    <div class="container">
      <div class="carousel-caption">
        <h1> Headling 1 </h1>
        <p> Description 1</p>
      </div>
    </div>
  </div>
  <div class="item"> <img src="2.jpg" style="width:100%" data-src="" alt="Second slide">
    <div class="container">
      <div class="carousel-caption">
        <h2>
        Headling 2
        </h1>
        <p> Description 2</p>
      </div>
    </div>
  </div>
  <div class="item"> <img src="1.jpg" style="width:100%" data-src="" alt="Third slide">
    <div class="container">
      <div class="carousel-caption">
        <h2>
        Headling 3
        </h1>
        <p> Description 3</p>
      </div>
    </div>
  </div>
</div>                
              

图片的src属性指定图片的URL，data-src是图片的占位图片的URL。

幻灯片的圆点导航按钮的HTML结构如下：

<ol class="carousel-indicators"<
  <li data-target="#myCarousel" data-slide-to="0" class="active"<</li<
  <li data-target="#myCarousel" data-slide-to="1"<</li<
  <li data-target="#myCarousel" data-slide-to="2"<</li<
</ol<                
              

data-slide-to属性指定该按钮与幻灯片的哪个slide对应，当前激活的slide用class active表示。

幻灯片左右导航箭头按钮的HTML代码如下：

<a class="left carousel-control" href="#myCarousel" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
</a>                
              

data-slide属性指定是向前还是向后的箭头导航。箭头图标使用的是Boostrap内嵌的左右箭头字体图标。

在页面中放入上面的代码，不需要再使用额外的js代码来初始化该幻灯片插件，即可使它开始正常工作。