Bootstrap写出一个简单的轮播图。

轮播图：

1.创建一个div把轮播图装起来，

然后class里面写.carousel .slide

然后随便创建一个id #banner；

再次添加个属性data-ride="carousel"

<div class=" carousel slide " id=" banner "></div>

2.创建切换的小圆点

用ol>li写

在ol的class使用.carousel-indicators

然后有几个图片就创建几个li，

并在li中添加data-target属性，属性中就填写刚才在div中设置的id，再次添加data-slide-to="0" class="active"；

<ol class=" carousel-indicators ">

<li data-target=" #banner " data-slide-to="0" class=" active "></li>

<li data-target="#banner" data-slide-to="1" ></li>

<li data-target="#banner" data-slide-to="2" ></li>

</ol>

3.创建div，装入所有轮播的图片

class为.carousel-inner；

4.每个图片都需要用div装起来

class为.item active，

img引入图片，

可添加图片标题与描述，

在每个图片的div内再次创建div装入对图片的描述

class写为.carousel-cartion，

div里可写 h1~6或p等标签；

<div class=" carousel-inner ">

<div class=" item active ">

<img src="./img/c2.jpg">

<div class=" carousel-caption ">

<h3>美丽的大海边</h3>

<p>拍婚纱照的真不少</p>

</div>

</div>

<div class=" item ">

<img src="./img/c3.jpg">

<div class=" carousel-caption ">

<h3>美丽的大海边</h3>

<p>拍婚纱照的真不少</p>

</div>

</div>

<div class=" item ">

<img src="./img/c4.jpg">

<div class=" carousel-caption ">

<h3>美丽的大海边</h3>

<p>拍婚纱照的真不少</p>

</div>

</div>

</div>

5.在添加一个左右切换图片的功能

创建a标签，href属性写上总体div的id，

class为.left .caroysel-control,

data-slide为prev，

在a标签中在创建个span标签，

class为.glyphicon glyphicon-chevron-left，

看class内容就可以知道为左方向，右方向只要改成right,data-slide改为next即可；

<a href="#banner" class=" left carousel-control " data-slide=" prev ">

<span class=" glyphicon glyphicon-chevron-left "></span>

</a>

<a href="#banner" class=" right carousel-control " data-slide=" next ">

<span class=" glyphicon glyphicon-chevron-right "></span>

</a>

一个简单的轮播图已经完成，最终代码为：

<div class="carousel slide" id="banner" data-ride="carousel" >
        <ol class="carousel-indicators">
            <li data-target='#banner' data-slide-to='0' class="active"></li>
            <li data-target='#banner' data-slide-to='1'></li>
            <li data-target='#banner' data-slide-to='2'></li>
            <li data-target='#banner' data-slide-to='3'></li>
        </ol>
        <div class="carousel-inner" >
            <div class="item active">
                <img src="./img/3.JPG" alt="">
                <div class="carousel-caption">
                    <h3>测试测试测试</h3>
                    <p>再测试再测试</p>
                </div>
            </div>
            <div class="item">
                <img src="./img/4.JPG" alt="">
                <div class="carousel-caption">
                    <h3>测试测试测试</h3>
                    <p>再测试再测试</p>
                </div>
            </div>
            <div class="item">
                <img src="./img/5.JPG" alt="">
                <div class="carousel-caption">
                    <h3>测试测试测试</h3>
                    <p>再测试再测试</p>
                </div>
            </div>
            <div class="item">
                <img src="./img/6.JPG" alt="">
                <div class="carousel-caption">
                    <h3>测试测试测试</h3>
                    <p>再测试再测试</p>
                </div>
            </div>
        </div>
        <a href="#banner" class="left carousel-control" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a href="#banner" class="right carousel-control" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>