start：须要引入bootstrap轮播插件 carousel.js 或者间接引入bootstrap.min.js
基本原理：
第一步：设置图片轮播的容器。---其余内容都须要搁置在这个容器里
采纳carousel款式，给这个容器一个ID值，不便前面采纳data属性触发。
<div id="demo" class="carousel"></div>第二步：设置图片轮播计数器。
在容器div.carousel的外部增加图片轮播计时器，采纳carousel-indicators款式，个别用ol有序列表（有几张图片搁置几个li），以白点的模式展现(具体款式在bootstrap.css文件第5835行起)
<div id="demo" class="carousel"> <ol class="carousel-indicators"> <li class="active"></li> <li></li> <li></li> </ol></div>第三步：设置轮播图片播放区
最要害的区域，次要用来搁置须要轮播的图片，用carousel-inner款式管制，用item容器搁置每张轮播的图片。
<div id="demo" class="carousel"> <ol class="carousel-indicators"> <li class="active"></li> <li></li> <li></li> </ol> <div class="carousel-inner"> <div class="item">  </div> <div class="item"> ![]() </div> </div></div>第四步：设置图片轮播控制器
个别图片轮播会有一个向前向后播放的控制器，在此，用carousel-control款式配合left、right来实现。
<div id="demo" class="carousel"> <ol class="carousel-indicators"> <li class="active"></li> <li></li> <li></li> </ol> <div class="carousel-inner"> <div class="item">  </div> <div class="item"> ![]() </div> </div> <a class="carousel-control left"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right"> <span class="glyphicon glyphicon-chevron-right"></span> </a></div>demo:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/> <!-- 解决兼容问题--> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <!-- 搜索引擎--> <meta name="keywords" content="bootstrap,css,html"> <script src="js/jquery-3.1.0.min.js"></script> <!-- jquery在前边，bootstrap依赖jQuery--> <script src="js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/bootstrap.min.css"/> <link rel="icon" href="favicon.icon"> <title></title> <style> #slidershow{ width: 300px; height: 300px; margin: 100px 400px; } img{ width: 300px; height: 300px; } </style> </head> <body> <div id="slidershow" class="carousel slide"><!-- 图片轮播 的容器--> <!-- 设置图片轮播计数器 图片轮播的程序--> <ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0"></li> <li data-target="#slidershow" data-slide-to="1"></li> <li data-target="#slidershow" data-slide-to="2"></li> <li data-target="#slidershow" data-slide-to="3"></li> <li data-target="#slidershow" data-slide-to="4"></li> </ol> <!-- 设置轮播图片播放区 --> <div class="carousel-inner"> <div class="item active"> <a href="#"></a> </div> <div class="item"><a href="#"></a></div> <div class="item"><a href="#"></a></div> <div class="item"><a href="#"></a></div> <div class="item"><a href="#"></a></div> </div> <!-- 设置图片轮播控制器 --> <a class="left carousel-control " href="#slidershow" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control " href="#slidershow" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div><!-- 图片轮播 的容器--> </body> </html>