插件一般是为了解决某个问题而专门存在,其功能单一,并且比较小
这里主要使用了 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如下面所示