Bootstrap V3版本轮播（滚动幻灯片）插件使用

首页大屏滚动幻灯片是网站常用表现手法，尤其企业展示型网站使用最多，下面针对Bootstrap V3版本幻灯片调用做详细分解记录，以便后期查阅。

一、首先引用Bootstrap源码的CSS和JS与相关的JQuery版本文件（V3版本匹配的JQ文件版本为1.9版本系列）。

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="js/jquery-min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="js/bootstrap-min.js"></script>

二、书写轮播代码框架

首先写最外面的主题部分

...这里面写主要内容

</div>

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

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

</ol>

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

第三写轮播主体部分

</div>

</div>

</div>

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

第四写左右 Controls

</a>

</a>

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

第五，写JS代码，carousel 方法

//轮播自动播放

$('#myCarousel').carousel({

//自动4秒播放

interval : 4000,

//设置不间断播放

wrap:true,

});

</script>

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

选项

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

选项名称	类型/默认值	Data 属性名称	描述
interval	number 默认值：5000	data-interval	自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。
pause	string 默认值："hover"	data-pause	鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
wrap	boolean 默认值：true	data-wrap	轮播是否连续循环。

演示代码：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>网站标题</title><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" href="css/style.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--></head><body>
<div id="header"><div class="banner"><div id="myCarousel" class="carousel slide"  data-ride="carousel" data-wrap="false" data-interval="1000"><!-- 轮播（Carousel）指标 --><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><!-- 轮播（Carousel）项目 --><div class="carousel-inner"><div class="item active"><img src="data:images/banner1.jpg" alt="First slide"></div><div class="item"><img src="data:images/banner2.jpg" alt="First slide"></div><div class="item"><img src="data:images/banner3.jpg" alt="First slide"></div></div><!-- 轮播（Carousel）导航 --><a class="carousel-control left" href="#myCarousel"data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="carousel-control right" href="#myCarousel"data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a></div></div>
</div><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="js/jquery-min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="js/bootstrap-min.js"></script><script type="text/javascript">
//轮播自动播放
$('#myCarousel').carousel({
//自动4秒播放
interval : 4000,

//设置自动循环
wrap:true,
});
</script></body>
</html>