首页 > 代码库 > Bootstrap图片旋转轮播的实现
Bootstrap图片旋转轮播的实现
bootstrap初级知识旋转轮播
源文件:carousel.js、carousel.less
CSS文件:bootstrap.css
这些源文件可以从bootstrap中下载,关于轮播,有很多译法,有人叫轮播,有人叫传送带。轮播效果默认是向左轮播,大家先看一下效果图哦!
下面是源代码:
<div class="row">
<div id="mid" class="col-xs-6">
<div data-ride="carousel" class="carousel slide" id="carousel-container">
<div class="carousel-inner">
/*--这里放置轮播的图片 --*/
<div class="item"><img alt="第一张图" src="http://www.mamicode.com/#"></img></div>
<div class="item active"><img alt="第二张图" src="http://www.mamicode.com/#"></img></div>
<div class="item"><img alt="第三张图" src="http://www.mamicode.com/#"></img></div>
</div>
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel-container"></li>
<li data-slide-to="1" data-target="#carousel-container"></li>
<li data-slide-to="2" data-target="#carousel-container" class="active"></li>
</ol>
<a data-slide="prev" href="http://www.mamicode.com/#carousel-container" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" href="http://www.mamicode.com/#carousel-container" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
属性名称 | 类型 | 默认值 | 描述 |
data-interval | number | 5000 | 幻灯片轮播的等待时间(毫秒)。如果为false,轮播将不会自动开始循环 |
data-pause | string | hover | 默认鼠标停留在幻灯片区域即暂停轮播。鼠标离开即启动轮播 |
data-wrap | boolean | true | 轮播是否持续循环 |
Bootstrap图片旋转轮播的实现