使用BootStrap制作轮播图：

注：本文所需文件和图片在文章末尾提供

一个页面好看的网站，最少不了的是有自动滑动的图片效果，有这种感觉最能让人眼前一亮。你能知道这是什么技术吗？不用猜了，那就是轮播图了。我总结了多方面轮播图的技术，悟出了这一套属于我们共享的独门绝技。

怎么玩呢？直接上代码。

1、往静态资源根目录上导入 font 目录（重要）：

2、css代码：

注：需要在html页面导入bootstrap.min.css文件

.carousel-inner .item div {height: 800px;background-size: cover;}.carousel-inner .item .img1 {background: url("/*图片1*/") no-repeat center;}.carousel-inner .item .img2 {background: url("/*图片2*/") no-repeat center;}.carousel-inner .item .img3 {background: url("/*图片3*/") no-repeat center;}

3、javascript代码：

注：需要在html页面导入 jquery-1.11.3.min.js 文件和 bootstrap.min.js 文件

javascript自写代码无

4、html代码：

<div id="carousel-example-generic"class="carousel slide index-carousel" data-ride="carousel"data-interval="2000"><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><div class="carousel-inner" role="listbox"><div class="item active"><div class="img1"></div></div><div class="item"><div class="img2"></div></div><div class="item"><div class="img3"></div></div></div><a class="left carousel-control" href="#carousel-example-generic"role="button" data-slide="prev"> <spanclass="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <spanclass="sr-only">Previous</span></a> <a class="right carousel-control" href="#carousel-example-generic"role="button" data-slide="next"> <spanclass="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>

至此，所有代码全部解决。当然，还需要上述图片和js文件，等等，不要急。

1、font目录提取码：6666

2、（图片1）（图片2）（图片3）属于轮播图片，小编用的是（1920px × 820px）大小的图片，这里自己选择什么图片作为网站轮播图即可。

3、bootstrap.min.css文件：

bootstrap.min.css文件下载提取码：6666

4、jquery-1.11.3.min.js文件：

jquery-1.11.3.min.js文件下载提取码：6666

5、bootstrap.min.js文件：

bootstrap.min.js文件下载提取码：6666