Bootstrap框架中 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式
轮播图效果：
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ????<title>Cary_Bootstrap轮播器</title> ???<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> ???<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> ???<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> ???????<style> ???#myCarousel { ???margin: 150px 450px 150px; ???} ???</style> ???</head><body><div id="myCarousel" class="carousel slide"> ???????<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> ????????????<div class="carousel-inner"> ???????<div class="item active" align="center"> ???????????<img src="index/11.jpg" alt="First slide"> ???????</div> ???????<div class="item" ???align="center"> ???????????<img src="index/22.jpg" alt="Second slide"> ???????</div> ???????<div class="item" ???align="center"> ???????????<img src="index/33.jpg" alt="Third slide"> ???????</div> ???</div> ???????<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> ???????<span class="glyphicon glyphicon-chevron-left" ></span> ???</a> ???<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> ???????<span class="glyphicon glyphicon-chevron-right" ></span> ???</a></div> </body></html>实现过程：
样式中用margin设置轮播器整体位置
图片比较小，不设置整体位置会让轮播器箭头和图片分隔距离太远。
<style>
#myCarousel {
margin: 150px 450px 150px;
}
</style>
margin相关属性margin简写属性在一个声明中设置所有外边距属性。该属性可以有1-4个值。margin的默认值是0。没有继承性，也就是说给父元素设置的margin值并不会自动传递到子元素中。一个参数margin: 10px;1所有4个外边距都是10px两个参数margin: 10px 5px;1上外边距和下外边距是10px右外边距和左外边距是5px三个参数margin: 10px 5px 15px;1上外边距是10px右外边距和左外边距是5px下外边距是15px四个参数margin: 10px 5px 15px 20px;1上外边距是10px右外边距是5px下外边距是15px左外边距是20px设置四个外边距的顺序是上、右、下、左，请记住顺时针即可。
margin属性详解：传送门
一、给轮播器添加指标
???<ol class="carousel-indicators"> ????????<!--设置轮播器列表区域样式--> ?????????????????????????????????????????????????????????????????????????????????<!--data-slide-to 给每张图片设置一个指标--> ???????<li data-target="#myCarousel" data-slide-to="0" class="active"></li> ???<!--class="active"设置播放当前页面--> ???????<li data-target="#myCarousel" data-slide-to="1"></li> ???????????????????????????<li data-target="#myCarousel" data-slide-to="2"></li> ???</ol> ?
data-target="#myCarousel"写在轮播器列表li标签里，将轮播绑定轮播器区域div的id
data-slide-to="0"写在轮播器列表li标签里，将轮播器列表编号，默认从0开始
二、添加轮播图片
???<div class="carousel-inner"> ?????????????????????<!--设置轮播器图片区域--> ???????<div class="item active" align="center"> ????????<!--设置轮播器图片样式、居中显示--> ???????????<img src="index/11.jpg" alt="First slide"> ???????</div> ???????<div class="item" ???align="center"> ???????????<img src="index/22.jpg" alt="Second slide"> ???????</div> ???????<div class="item" ???align="center"> ???????????<img src="index/33.jpg" alt="Third slide"> ???????</div> ???</div>
(设置图片大小：<img style="height: height px ; width: width px">)
三、设置轮播器箭头
data-slide 关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置，可以用data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数
???<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> ???????<span class="glyphicon glyphicon-chevron-left" ></span> ???</a> ???<!--carousel-control轮播器箭头样式--> ???<!--href="#myCarousel"写在轮播器箭头a标签里，将a标签连接href=轮播器区域div的id--> ???<!--data-slide="prev"写在轮播器箭头a标签里，设置箭头左点击事件-- ???<!--span标签标glyphicon-chevron-let设置图标自动靠左--> ???????<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> ???????<span class="glyphicon glyphicon-chevron-right" ></span> ???</a>
属性名称 ??????????类型 ?????默认值 ????????描述data-interval ???number ????5000 ???幻灯片轮换的等待时间（毫秒）。如果为false,轮播将不会自动开始循环data-pause ??????string ????hover ??默认鼠标悬停留在幻灯片区域即停止播放，离开即开始播放data-wrap ???????布尔值 ?????true ???轮播是否持续循环-->
$(function () { ???$(‘#myCarousel‘).carousel({ ???????//设置自动播放/3 秒 ???????interval: 3000, ???});});参考资料：菜鸟教程 Bootstrap 轮播（Carousel）插件 传送门
JS框架_(Bootstrap框架)实现简单的轮播图
原文地址：https://www.cnblogs.com/1138720556Gary/p/9297496.html