bootstrap轮播插件教程

1、打开bootstrap手册找到  Carousel   JavaScript 插件,先熟悉 Carousel插件效果及代码布局

2、首先写最外面的主题部分

<div id="myCarousel" class="carousel slide">

      ...这里面写主要内容

</div>

先定义一个ID为myCarousel   class名称为carousel slide  这是固定的

3、其次写 Indicators 就是轮播图下面的 指示信息 通常有 圆形、方形、圆圈等

<ol class="carousel-indicators">

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

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

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

</ol>

这里 OL 也可以用 UL  这 data-target="#myCarousel"  ID和外面的一样。

4、第三写轮播主体部分

<div class="carousel-inner">

<div class="item active" style="background:#223240">

     <img src="img/slide1.png" alt="first img"><!--图片不居中，让图片居中给这个img设置margin:0 auto-->

</div>

<div class="item" style="background:#F5E4DC;">

    <img src="img/slide2.png" alt="second img">

</div>

<div class="item" style="background:#DE2A2D;">

    <img src="img/slide3.png" alt="third img">

</div>

</div>

这里的图片和上一步提示是一致的  上一步写了 0～2的索引，是三个提示信息，那么这里就写三张图片的内容。

5、第四写左右 Controls 

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

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

</a>

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

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

</a>

这里的图标可以从bootstrap图片库是寻找 注意 data-slide 的用法。

6、第五，写JS代码，carousel 方法

<script type="text/javascript">

//轮播自动播放

$('#myCarousel').carousel({

//自动4秒播放

interval : 4000,

});

</script>

因为JS加载慢，所以建议放到最下面</body>之前。

7、浏览器测试效果。

最好是边做边测试，有不合适的地方即可修改。把浏览器放小一些，检测网页是否自适应屏幕大小不同的设备。