首页 > 代码库 > Bootstrap 轮播（Carousel）插件
Bootstrap 轮播（Carousel）插件
参见：http://www.w3cschool.cc/bootstrap/bootstrap-carousel-plugin.html
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title> <link href="http://www.mamicode.com/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="http://www.mamicode.com/scripts/jquery.min.js"></script> <script src="http://www.mamicode.com/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div id="myCarousel" class="carousel slide"> <!-- 轮播（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="http://www.mamicode.com/wp-content/uploads/2014/07/slide1.png" alt="First slide"> </div> <div class="item"> <img src="http://www.mamicode.com/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> </div> <div class="item"> <img src="http://www.mamicode.com/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> </div> </div> <!-- 轮播（Carousel）导航 --> <a class="carousel-control left" href="http://www.mamicode.com/#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="http://www.mamicode.com/#myCarousel" data-slide="next">›</a> </div> </body> </html>
分析：
Bootstrap轮播插件结构比较固定，轮播包含框需要指明ID值和carousel、slide类。框内包含三部分组件：标签框（carousel-indicators）图文内容框（carousel-inner）和左右导航按钮（carousel-control）。通过data-target="carousel_box"属性启动轮播，使用data-slide-to="0"、data-slide="prev"、data-slide="next"定义交互组件按钮的行为。
最外层 —— 轮播包含框：
<div id="myCarousel" class="carousel slide">
.carousel {
position: relative;
}
框内由三部分组成：
<!-- 轮播（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-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
border: 1px solid #fff;
border-radius: 10px;
}
注：
text-indent 属性：用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。
.carousel-indicators .active {
width: 12px;
height: 12px;
margin: 0;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 30px;
height: 30px;
margin-top: -15px;
font-size: 30px;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
margin-left: -15px;
}
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
margin-right: -15px;
}
.carousel-caption {
right: 20%;
left: 20%;
padding-bottom: 30px;
}
.carousel-indicators {
bottom: 20px;
}
}
<!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item active"> <img src="http://www.mamicode.com/wp-content/uploads/2014/07/slide1.png" alt="First slide"> </div> <div class="item"> <img src="http://www.mamicode.com/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> </div> <div class="item"> <img src="http://www.mamicode.com/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> </div> </div>
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: .6s ease-in-out left;
-o-transition: .6s ease-in-out left;
transition: .6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
width: 100% \9;
max-width: 100%;
height: auto;
}
<!-- 轮播（Carousel）导航 --> <a class="carousel-control left" href="http://www.mamicode.com/#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="http://www.mamicode.com/#myCarousel" data-slide="next">›</a>
注：&lsaquo和&rsaquo分别为左右箭头的转义表示。
.carousel-control {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15%;
font-size: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
filter: alpha(opacity=50);
opacity: .5;
}
.carousel-control.left {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));
background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#80000000‘, endColorstr=‘#00000000‘, GradientType=1);
background-repeat: repeat-x;
}
.carousel-control.right {
right: 0;
left: auto;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));
background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#00000000‘, endColorstr=‘#80000000‘, GradientType=1);
background-repeat: repeat-x;
}
Bootstrap 轮播（Carousel）插件