bootstrap 学习笔记 轮播(Carousel)插件
2015-05-27 17:30
666 查看
Bootstrap轮播(carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除些之外,内容也是足够灵活的,可以是图像,内嵌框架,视频或者其他您想要旋转的任何类型的内容。
示例:
下面是不念旧恶简单的幻灯片,使用bootstrap轮播carousel插件显示了一个循环播放元素的通用性组件。为了实现轮播,您只需要添加带有该标记的代码即可。不需要使用data属性,只需要简单的基于class的开发即可。
可选的标题
您可以通过item内的carousel-caption元素向幻灯片添加标题,只需要在该处放置任何可选的html即可,它会自动对齐并格式化。
设置轮播时间间隔为2000ms.
全部html
本节完
示例:
下面是不念旧恶简单的幻灯片,使用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 | 轮播是否连续循环。 |
$('#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>
本节完
相关文章推荐
- Bootstrap基本插件学习笔记之轮播幻灯片(23)
- Bootstrap学习总结笔记(23)-- 基本插件之轮播幻灯片
- Bootstrap 历练实例-轮播(carousel)插件方法
- Bootstrap学习总结笔记(17)-- 基本插件之标签切换
- Bootstrap基本插件学习笔记之模态对话框(16)
- Bootstrap的js插件之轮播(carousel)
- Bootstrap 轮播(Carousel)插件
- Bootstrap学习总结笔记(20)-- 基本插件之Alert警告框
- Bootstrap基本插件学习笔记之Alert警告框(20)
- Bootstrap学习第二天轮播插件
- Bootstrap 历练实例-轮播(carousel)插件的事件
- Bootstrap基本插件学习笔记之Tooltip提示工具(18)
- Bootstrap插件carousel源码的学习
- bootstrap学习笔记 插件概述
- Bootstrap carousel轮播图插件 简洁版
- Bootstrap 轮播(Carousel)插件
- Bootstrap教程JS插件弹出框学习笔记分享
- BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
- bootstrap插件学习-bootstrap.carousel.js
- Bootstrap3 轮播之个人学习笔记