标签：
Bootstrap轮播(carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除些之外，内容也是足够灵活的，可以是图像，内嵌框架，视频或者其他您想要旋转的任何类型的内容。
示例：
下面是不念旧恶简单的幻灯片，使用bootstrap轮播carousel插件显示了一个循环播放元素的通用性组件。为了实现轮播，您只需要添加带有该标记的代码即可。不需要使用data属性，只需要简单的基于class的开发即可。
可选的标题
您可以通过item内的carousel-caption元素向幻灯片添加标题，只需要在该处放置任何可选的html即可，它会自动对齐并格式化。
<img alt="first" src="~/Images/02.png" /> <div class="carousel-caption">标题 2</div>
有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| interval | number 默认值：5000 |
data-interval | 自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。 |
| pause | string 默认值："hover" |
data-pause | 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。 |
| wrap | boolean 默认值：true |
data-wrap | 轮播是否连续循环。 |
设置轮播时间间隔为2000ms.
$(‘#myCarousel1‘).carousel({ interval: 2000 });
全部html
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Scrollspy</title> <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <script src="~/Scripts/jquery-2.1.3.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> </head> <body> <h2>Carousel</h2> <div id="myCarousel1" class="carousel slide" data-interval="5000"> @*轮播指标*@ <ol class="carousel-indicators"> <li data-target="#myCarousel1" data-slide-to="0" class="active"></li> <li data-target="#myCarousel1" data-slide-to="1"></li> <li data-target="#myCarousel1" data-slide-to="2"></li> <li data-target="#myCarousel1" data-slide-to="3"></li> </ol> @*轮播项目*@ <div class="carousel-inner"> <div class="item active"> <img alt="first" src="~/Images/01.png" /> <div class="carousel-caption">标题 1</div> </div> <div class="item"> <img alt="first" src="~/Images/02.png" /> <div class="carousel-caption">标题 2</div> </div> <div class="item"> <img alt="first" src="~/Images/03.png" /> <div class="carousel-caption">标题 3</div> </div> <div class="item"> <img alt="first" src="~/Images/04.png" /> <div class="carousel-caption">标题 4</div> </div> </div> </div> <!-- 轮播（Carousel）导航 --> <a class="carousel-control left" href="#myCarousel1" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel1" data-slide="next">›</a> <script> $(function () { $(‘#myCarousel1‘).carousel({ interval: 2000 }); }) </script> </body> </html>
本节完
标签：
原文地址：http://www.cnblogs.com/langhua/p/4533994.html
