现在页面制作越来越便捷，制作轮播图也很简单。

下面是轮播图的截图：

一共有四页，这是其中的两页，下面让我们来看看代码：

<script src="js/jquery-3.2.1.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<link rel="stylesheet" href="css/bootstrap.css" />   //这里引入jquery和bo0tstrap框架，是写代码更加简单便捷，也需要导入深css样式，不然轮播图会出问题。

<ol class="carousel-indicators">

<li class="active" data-slide-to="0" data-target="#carousel-519501">

</li>

<li data-slide-to="1" data-target="#carousel-519501">

</li>

<li data-slide-to="2" data-target="#carousel-519501">

</li>

</ol>

<div class="carousel-inner">

<div class="item active">

<img alt="" src="img/one.jpg" />

<div class="carousel-caption">

<h4>

First Thumbnail label

</h4>

<p>

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

</p>

</div>

</div>

<div class="item">

<img alt="" src="img/two.jpg" />

<div class="carousel-caption">

<h4>

Second Thumbnail label

</h4>

<p>

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

</p>

</div>

</div>

<div class="item">

<img alt="" src="img/three.jpg" />

<div class="carousel-caption">

<h4>

Third Thumbnail label

</h4>

<p>

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

</p>

</div>

</div>

<div class="item">

<img alt="" src="img/fore.jpg" />

<div class="carousel-caption">

<h4>

Third Thumbnail label

</h4>

<p>

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

</p>

</div>

</div>

</div>

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

</div>

//4张图片循环滚动

轮播图很容易使用，如果想深入了解可以查询相关资料。

在这里我要分享一个bootstrap的一个插件，网址是http://www.ibootstrap.cn/，希望对你会有帮助，对了

www.jq22.com里也有很多不错的插件，很美观，做出来的效果也比较能吸引顾客吧。

www.jq22.com