插件的使用

插件一般是为了解决某个问题而专门存在，其功能单一，并且比较小

这里主要使用了 Bootstrap中文网里的js插件做以前自己模仿的B站首页的一个轮播图区域

首先下载Bootstrap3中文文档，打开javascript插件，这里有详细的说明如何进行使用，以及相对应的功能

通过这里可以看出在引入js之前必须先引入jQuery文件，下载下来的文件里面是没有 jQuery文件的，我们需要单独的上jQuery网站自行下载

选择一个我们想使用的轮播图效果，将下面的对应html代码复制下来粘贴到我们对应的轮播图区域

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

按照自己的需要增加修改图片以及一些小样式，下面是我修改过后的代码

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                      <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                      <li data-target="#carousel-example-generic" data-slide-to="4"></li>
                    </ol>
                  
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                      <div class="item active">
                        <img src="imgs/guanyuwanglian.png" alt="...">
                      </div>
                      <div class="item">
                        <img src="imgs/duochishucai.png" alt="...">
                      </div>
                      <div class="item">
                        <img src="imgs/chentailang.png" alt="...">
                      </div>
                      <div class="item">
                        <img src="imgs/banben.png" alt="...">
                      </div>
                      <div class="item">
                        <img src="imgs/xunguang.png" alt="...">
                      </div>
                    </div>
                  
                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                      <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                      <span class="sr-only">Next</span>
                    </a>
                  </div>

接下来引用下载下来的css文件、js文件以及jQuery文件

现在就可以看到最终效果 http://127.0.0.1:5500/B%E7%AB%99%E9%A6%96%E9%A1%B5.html如下面所示