Bootstrap 轮番插件

轮番

Bootstrap轮番插件Carousel是一个灵活的、响应式的、无缝循环播放的幻灯片切换插件，它的内容可以是图片、视频、或者其他任何内容。

Bootstrap轮番插件Carousel需要 bootstrap-carousel.js 文件支持，在使用该插件之前，应该导入 jQuery 和 bootstrap-carousel.js 文件。

使用方法

Bootstrap中，一个轮番包含在一个 class="carousel" 的容器中，其中包含轮番指示器、轮番内容、轮番的控制按钮。还要为容器定义一个 id，以确保在播放时，能够对控制按钮和轮番指示器进行正常定位。如：

<div id="myCarousel" class="carousel">
...
</div>

1）轮番指示器

轮番指示器是一个 class="carousel-indicators" 的有序列表，用来指示有多少个轮番条目，它包含的 <li> 元素的个数，就是轮番条目的个数。还可以为默认活动的 <li> 元素添加 .active 类。如：

<ol class="carousel-indicators">
<li class="active"></li>
<li></li>
<li></li>
</ol>

2）轮番内容

轮番内容是一个轮番条目的列表，整个列表包含在一个 class="carousel-inner" 的容器中，列表中可以包含多个轮番条目，每个轮番条目包含在一个 class="item" 的容器中。还可以为默认活动的轮番条目添加 .active 类，并确保与列表指示器中的定义一致。

最简单的轮番内容只包含图片就可以了。如：

<div class="carousel-inner">
<div class="item active">
<img src="slide-01.jpg" />
</div>
</div>

稍微复杂的轮番条目还可以包含标题和说明，并放在一个 class="carousel-caption" 的容器中。如：

<div class="carousel-inner">
<div class="item active">
<img src="slide-01.jpg" />
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ...</p>
</div>
</div>
</div>

3）轮番的控制按钮

轮番的控制按钮，用来人工控制轮番的播放，它包含两个按钮，一个控制向前播放，一个控制向后播放。使用 .carousel-control 定义按钮的样式，.left 和 .right 定义按钮的浮动方向。href 属性定义轮番包含框的 id。

<a class="carousel-control left" href="#myCarousel">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel">&rsaquo;</a>

一个简单的轮番就定义完成了，完整代码如下：

<div id="myCarousel" class="carousel">

<ol class="carousel-indicators">
<li class="active"></li>
<li></li>
<li></li>
</ol>

<div class="carousel-inner">
<div class="item active">
<img src="slide-01.jpg" />
</div>
<div class="item">
<img src="slide-02.jpg" />
</div>
<div class="item">
<img src="slide-03.jpg" />
</div>
</div>

<a class="carousel-control left" href="#myCarousel">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel">&rsaquo;</a>
</div>

至此，一个轮番就定义好了。并且，无需编写任何JavaScript代码，就可以自动播放。播放时，会在右上角以小圆圈来指示轮番条目的个数，并以白色背景的小圆圈来指示当前条目。用户可以点击任意的小圆圈，让它成为当前条目。效果如图 5‑19所示：

图5-19 Bootstrap轮番插件Carousel

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap 轮番插件相关推荐

Bootstrap 轮番插件Collapse 调用方式
调用方式 1.JavaScript调用 JavaScript调用轮番其实很简单,只需在脚本中调用 carousel() 方法即可.格式为: $('.carousel').carousel(); Boo ...
Bootstrap3 轮番插件的事件
轮番插件的事件 Bootstrap为轮番插件定义了两个事件,通过这些事件,可以监听播放行为及轮番组件的状态.这些事件及含义见表 4‑12. 表 4‑12 轮番插件的事件及含义事件含义 slide. ...
Bootstrap3轮番插件的选项
轮番插件的选项 Bootstrap为轮番插件提供了 4 个选项,这些选项都可以通过 data 属性或JavaScript进行设置.选项的详细说明见表 4‑11: 表 4‑11 carousel插件的选 ...
Bootstrap3 轮番插件的调用方式
轮番插件的调用方式 1.JavaScript调用 JavaScript调用轮番其实很简单,只需在脚本中调用 carousel() 方法即可.格式为: $('.carousel').carousel() ...
Bootstrap3 轮番插件的使用方法
轮番 Bootstrap 的轮番插件(carousel.js)是一个灵活的.响应式的.无缝循环播放的幻灯片切换插件,它的内容可以是图片.视频.或者其他任何内容. 使用方法 Bootstrap中的轮番由 ...
bootstrap select 插件两级联动
2019独角兽企业重金招聘Python工程师标准>>> bootstrap select 插件两级联动插件地址:http://silviomoreto.github.io/boot ...
Bootstrap 折叠插件Collapse 选项
选项 Bootstrap折叠插件Collapse有2 个选项,一个是parent,一个是toggle,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 5‑7. 表 5‑7 B ...
Bootstrap 折叠插件Collapse 调用方式
调用方式 Bootstrap折叠插件Collapse的结构相对复杂,但调用比较简单,可以通过data属性调用,也可以通过JavaScript调用. 1.data 属性调用要激活折叠插件的激活行为,首 ...
Bootstrap 折叠插件
折叠当列表菜单的条目特别多,而页面空间有限时,使用类似于手风琴的折叠菜单是不错的选择,因为它可以节约页面空间,方便用户浏览. 折叠插件需要 bootstrap-collapse.js 文件支持,在使 ...

Bootstrap 轮番插件

轮番

使用方法

Bootstrap 轮番插件相关推荐

最新文章

热门文章