只是个人理解仅供参考！！！如有错误就当我放屁 先上效果 再来代码
<div id="carousel-of-product" class="carousel slide" data-ride="carousel" data-interval=2000> <!-- 轮播指标--> <ol class="carousel-indicators"> <li data-target="#carousel-of-product" data-slide-to="0" class="active"></li> <li data-target="#carousel-of-product" data-slide-to="1" ></li> <li data-target="#carousel-of-product" data-slide-to="2" ></li> <li data-target="#carousel-of-product" data-slide-to="3" ></li> </ol> <!-- 轮播项目--> <div class="carousel-inner" role="listbox"> <div class="item active"> <a><img src="../lunbo/1.jpg"></a> </div> <div class="item"> <a><img src="../lunbo/2.jpg"></a> </div> <div class="item"> <a><img src="../lunbo/3.jpg"></a> </div> <div class="item"> <a><img src="../lunbo/4.jpg"></a> </div> </div> </div> </div>代码解释
第一层div中 class=“carousel slide” -----------整个轮播的样式 （整个div是轮播，轮播动画方式是slide) data-ride=“carousel” -------------页面加载就开始轮播，如果删除就不会轮播 data-interval=2000 ---------------轮播间隔的时间 单位是ms
ol中 class=“carousel-indicators”----------代表轮播时候的指标（就是那一列小圆点）
li中 data-target="#carousel-of-product"----------指向第一个div中的id（不过我好像删了不影响结果） data-slide-to=“0”----------------------------------轮播的位置 class=“active”-------------------------------------当前位置（就是实心小圆点）后面介绍修改这个样式
第二层div class=“carousel-inner”---------------------------轮播的内容的样式和第一层div不同
第三层div class=“item active”--------------------------------item就是每个轮播的项目的样式 active 是当前轮播位置，两个active会卡住只能一个div有active，有active的就是轮播的第一张图
div样式分析
我们修改第二层div的样式 宽度改为500px;
<style> .test1{ width: 500px; } body{ background-color: #000; } </style> <div class="carousel-inner test1" role="listbox">----------------------增加test1样式 <div class="item active"> <a><img src="../lunbo/1.jpg"></a> </div> <div class="item"> <a><img src="../lunbo/2.jpg"></a> </div> <div class="item"> <a><img src="../lunbo/3.jpg"></a> </div> <div class="item"> <a><img src="../lunbo/4.jpg"></a> </div> </div>看效果 可以看到轮播的位置只有页面中的500px； 也就是说 绿色的框是第一层div 红色的框是第二层div 我们可以利用这个进行样式调节，具体用法就不再赘述
小圆点样式分析
修改非当前圆点
.test2 li{ width: 30px; height: 5px; border: 1px solid transparent; background-color: #717171; border-radius: 2px; } <ol class="carousel-indicators test2">---------------------------------------添加test2样式 <li data-target="#carousel-of-product" data-slide-to="0" class="active"></li> <li data-target="#carousel-of-product" data-slide-to="1" ></li> <li data-target="#carousel-of-product" data-slide-to="2" ></li> <li data-target="#carousel-of-product" data-slide-to="3" ></li> </ol>效果 非当前圆点变成了长方形（不过当前原点变成了正方形应该是border-radius属性影响的）
修改当前圆点
.test2 .active{ width: 30px; height: 5px; border: 1px solid transparent; background-color:#fff; border-radius: 2px; }看看效果 长方形没问题 有没有觉得这个轮播指标太靠上了，移动一下
.test2{ position: absolute; top: 180px; text-align: center; }看看效果 不错那么我们再来个竖型的
.test2{ position: absolute; top: 30px; left: 170px; } .test2 li{ width: 30px; height: 5px; border: 1px solid transparent; background-color: #717171; border-radius: 2px; display: block; margin-top: 20px; } .test2 .active{ width: 30px; height: 5px; border: 1px solid transparent; background-color:#fff; border-radius: 2px; display: block; margin-top: 20px }看看效果 有点丑，不过感觉自己666的
最后附上完整横型代码及效果图
<!doctype html> <html> <head> <meta charset="utf-8"> <title>轮播</title> <script src="../js/jquery/2.0.0/jquery.min.js"></script> <link href="../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="../js/bootstrap/3.3.6/bootstrap.min.js"></script> <style> .test1{ width: 500px; margin: 100px auto; } .test2{ position: absolute; top: 180px; text-align: center; } .test2 li{ width: 30px; height: 5px; border: 1px solid transparent; background-color: #717171; border-radius: 2px; } .test2 .active{ width: 30px; height: 5px; border: 1px solid transparent; background-color:#fff; border-radius: 2px; } body{ background-color: #000; } </style> </head> <body> <div id="carousel-of-product" class="carousel slide test1" data-ride="carousel" data-interval=2000> <!-- 轮播指标--> <ol class="carousel-indicators test2"> <li data-target="#carousel-of-product" data-slide-to="0" class="active"></li> <li data-target="#carousel-of-product" data-slide-to="1" ></li> <li data-target="#carousel-of-product" data-slide-to="2" ></li> <li data-target="#carousel-of-product" data-slide-to="3" ></li> </ol> <!-- 轮播项目--> <div class="carousel-inner test1" role="listbox"> <div class="item active"> <a><img src="../lunbo/1.jpg"></a> </div> <div class="item"> <a><img src="../lunbo/2.jpg"></a> </div> <div class="item"> <a><img src="../lunbo/3.jpg"></a> </div> <div class="item"> <a><img src="../lunbo/4.jpg"></a> </div> </div> </div> </body> </html>