详解bootstrap轮播（Carousel）插件
Posted 博阳科技
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了详解bootstrap轮播（Carousel）插件相关的知识，希望对你有一定的参考价值。
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 html、CSS、javascript 的，它简洁灵活，使得 Web 开发更加快捷。今天我们主要来说一下bootstrap轮播（Carouser）插件。
先上效果图，大家看一下。。。
接下来，我们拆分开来说，先说HTML结构。
第一、当前页面显示的内容，也就是上图所出现的绿色、黄色、灰色、红色、以及白色和图片色块，它们是以bootstrap栅格布局的，大家可以也自己调整，给固定宽高也没有问题。至于内容，可以是纯文本，也可以直接是图片，当然，也可以两者全部。
<div class="grid">
<div class="row">
<div class="col-xs-4 col-md-3">
<div class="content content-green">
<h2>One Central Location</h2>
<p>Easily manage your client base.</p>
</div>
</div>
<div class="col-xs-4 col-md-3">
<div class="content content-yellow">
<h2>A modern CMS</h2>
<p>A platform built for the modern business.</p>
</div>
</div>
<div class="col-xs-4 col-md-6">
<div class="content content-white">
<img alt="">
<h2>One United Team</h2>
<p>Designed for your whole team, not just designers.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-md-6">
<div class="content content-grey">
<img alt="">
<h2>Nimble Lively</h2>
<p>New websites up and running in seconds.</p>
</div>
</div>
<div class="col-xs-4 col-md-3">
<div class="content content-red">
<h2>Bright Content</h2>
<p>A proven CMS to support your success.</p>
</div>
</div>
<div class="col-xs-4 col-md-3">
<div class="content content-white-green">
<h2>Work Efficiently</h2>
<p>Benefit from regular upgrades without disruption.</p>
</div>
</div>
</div>
</div>
第二、轮播项目，事先是隐藏的，点击上文每个色块时出现对应的项目。它们用一个外层div（class为carousel-inner的）包裹所有，然后每个页面会被一个div（class为item）的包裹住，被包裹的内容大家可以自己调整。
<div class="carousel-inner" role="listbox">
<div class="item">
<div class="content content-green">
<span class="close-btn">✕</span>
<img class="feature-img" >
<h2>Designed for whole team, not just designers</h2>
<p>
<strong>CreativeCMS</strong> offers your whole team access as required to templates, code
<span class="highlight-yellow">(HTML, CSS, JavaScript)
</span>, fonts and images, providing unlimited scope to extend the default range of components
<span class="highlight-yellow"> Blog, Case studies and all.)
</span> to fit the bespoke needs of any client.
</p>
</div>
</div>
<div class="item">
<div class="content content-yellow">
<span class="close-btn">✕</span>
<h2>A modern CMS</h2>
<p>A platform built for the modern business.</p>
</div>
</div>
<div class="item">
<div class="content content-white">
<span class="close-btn">✕</span>
<h2>One United Team</h2>
<p>Designed for your whole team, not just designers.</p>
</div>
</div>
<div class="item">
<div class="content content-grey">
<span class="close-btn">✕</span>
<h2>Nimble & Lively</h2>
<p>New websites up and running in seconds.</p>
</div>
</div>
<div class="item">
<div class="content content-red">
<span class="close-btn">✕</span>
<h2>Bright Content</h2>
<p>A proven CMS to support your success.</p>
</div>
</div>
<div class="item">
<div class="content content-white-green">
<span class="close-btn">✕</span>
<h2>Work Efficiently</h2>
<p>Benefit from regular without disruption.</p>
</div>
</div>
</div>
第三、轮播指标，用一个ol列表来显示其各图形列表项，每个列表项需要指定data-slide-to=”index”属性，用于标记当前圆圈的索引号。其实就是轮播图片下方显示第几页内容的指示圈圈，可以自主编辑，圆的或者方的或者长条形的，端看个人爱好。如果你不需要下方的指示圈圈，也可以去掉。
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li></ol>
第四、轮播箭头，实现向左、向右移动的功能。
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria- hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria- hidden="true"></span>
<span class="sr-only">Next</span>
</a>
需要注意的是，所有内容需要包裹在一个div里面，这个div需要一个data-ride=”carousel”来指定为轮播放插件，并且提供一个Id，方便圆圈指示符的关联。
接下来CSS样式方面
因为是bootstrap轮播插件，自然要引入bootstrap.min.css。
其次，需要自己编辑的样式，需要着重注意的是以下几点：
一、Carousel：只有一个相对定位标记；
二、Carousel-inner：旋转图片列表区域，其中每项有item来修饰；
三、Carousel-control：设置向左、向右按钮的样式，其中会设置渐变、透明度等信息，提供了icon-prev、icon-next两种额外样式；
四、Carousel-indicators：圆圈部分样式，都是绝对定位，每个li设置为行内块元素，用text-indent：-999来隐藏字体；
五、关于自适应，宽由bootstrap栅格方式控制百分比，高由@media (max-width: 992px)控制。
样式如下：
body {
color: #888;
font-size: 18px;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
background: #f3f3f3;
}
.features-container {
position: relative;
height: 490px;
}
.carousel {
position: absolute;
width: 100%;
height: 100%;
}
.carousel-control {
position: absolute;
width: 80px;
color: #000;
background: none !important;
}
.carousel-control.left {
left: -80px;
}
.carousel-control.right {
right: -80px;
}
.carousel .carousel-inner,
.carousel .item,
.carousel .content {
height: 100%;
}
.close-btn {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 40px;
line-height: 40px;
color: #000;
font-weight: bold;
text-align: center;
background: #00d7b2;
}
.content-green .close-btn {
background: #fff;
}
.close-btn:hover {
background: #494b52;
color: #fff;
}
.content {
padding: 30px;
}
.content h2 {
font-size: 28px;
margin: 0 0 5px;
}
.content-green {
background: #00d7b2;
}
.content-green h2 {
color: #fff;
}
.content-yellow {
background: #ffcb4a;
}
.content-yellow h2 {
color: #333;
}
.content-white {
background: #fff;
}
.content-white h2 {
color: #333;
}
.content-grey {
background: #494b52;
}
.content-grey h2 {
color: #fff;
}
.content-grey p {
color: #999;
}
.content-red {
background: #ff5a55;
}
.content-red h2 {
color: #fff;
}
.content-red p {
color: #fff;
}
.content-white-green {
background: #fff;
}
.content-white-green h2 {
color: #00d7b2;
}
.grid> :first-child {
margin-bottom: 30px;
}
.grid .row>* {
position: static;
}
.grid .content {
height: 230px;
cursor: pointer;
overflow: hidden;
}
.grid img {
float: right;
margin: 0 -50px 0 0;
}
.grid .content.animate {
transition: all 0.4s ease;
}
.grid .content.active {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.feature-img {
float: right;
margin: -30px -30px 0 30px;
width: calc(50% + 30px);
height: 490px;
}
@media (max-width: 992px) {
.grid img {
display: none;
}
}
@media (max-width: 768px) {
.features-container {
height: 390px;
}
.row>div {
padding: 5px;
}
.grid .content {
padding: 15px;
height: 180px;
}
.content h2 {
font-size: 18px;
}
.content p {
font-size: 14px;
}
.feature-img {
height: 390px;
}
}
接下来JS方面
因为是bootstrap轮播插件，自然要引入bootstrap.min.js。
当然还要引入jquery-2.1.1.min.js，因为都是基于jquery的。
;(function($) {
'use strict';
$.fn.gridToCarousel = function(options) {
return this.each(function() {
var defaults = {
carouselInterval: false
},
settings = $.extend({}, defaults, options),
container = $(this),
grid = container.find('.grid'),
contents = grid.find('.content'),
carousel = container.find('.carousel'),
closeButtons = carousel.find('.close-btn');
carousel.carousel({
interval: settings.carouselInterval
})
$.each(contents, function(key) {
var el = $(this);
el
.on('click', function() {
var pos = el.position(),
clone = el.clone();
.css({
position: 'absolute',
left: pos.left,
top: pos.top,
width: el.outerWidth(true)
})
.appendTo(grid)
.children()
.remove();
setTimeout(function() {
clone
.addClass('animate')
.css({
left: 0,
top: 0,
width: '100%',
height: '100%'
});
setTimeout(function() {
carousel.removeClass('hidden');
carousel
.find('.item')
.removeClass('active')
.eq(key)
.addClass('active');
carousel
.find('[data-slide-to]')
.removeClass('active')
.eq(key)
.addClass('active');
grid.addClass('hidden');
clone.remove();
}, 400);
});
});
});
$.each(closeButtons, function(key) {
$(this)
.on('click', function() {
carousel.addClass('hidden');
grid.removeClass('hidden');
var content = contents.eq(key),
pos = content.position(),
clone = content.clone().appendTo(grid);
clone.children().remove();
clone
.css({
position: 'absolute',
left: 0,
top: 0,
width: '100%',
height: '100%'
})
.addClass('animate')
.css({
left: pos.left,
top: pos.top,
width: content.outerWidth(true),
height: content.outerHeight(true)
});
setTimeout(function() {
clone.remove();
}, 400);
});
});
});
};
})(jQuery);
就这样大家想要的旋转轮播效果就出来了，是不是很简单？
以上是关于详解bootstrap轮播（Carousel）插件的主要内容，如果未能解决你的问题，请参考以下文章