Bootstrap JavaScript插件:轮播插件 (carousel.js)

简介: Bootstrap 框架

作者:WangMin
格言:努力做好自己喜欢的每一件事

banner.png

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

整体结构

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

<div id="myBanner" class="carousel" data-ride="carousel">

</div>

1. 轮播指示器

轮播指示器是一个 class="carousel-indicators" 的有序列表,用来指示轮播的播放状态,对用户表现为一系列的小圆圈,实心圆表示当前处于活动状态的轮番条目。

有序列表子元素 li 的个数必须与轮播内容中的元素个数相等。子元素 li 的 data-target 属性值指示目标对象,必须设置为轮播容器的 id 值;data-slide-to 属性指示点击小圆圈时所要播放的轮播条目的索引值(索引从 0 开始)。还可以为默认处于活动状态的轮播条目添加 .active 类。默认是第一个条目处于活动状态。

 <ol class="carousel-indicators">
    <li data-target="#myBanner" data-slide-to="0"></li>
    <li data-target="#myBanner" data-slide-to="1"></li>
    <li data-target="#myBanner" data-slide-to="2" class="active"></li>
 </ol>

2. 轮播内容

轮播内容是一个轮番条目的列表,整个列表包含在一个 class="carousel-inner" 的容器中,列表中可以包含多个轮播条目,每个轮播条目包含在一个 class="item" 的容器中。还可以为默认处于活动状态的轮播条目添加 .active 类。默认是第一个条目处于活动状态。如果添加 .active 类,并确保它与列表指示器中定义的默认状态保持一致。最简单的轮播内容只包含图片就可以了。例如:

 <div class="carousel-inner">
    <div class="item active">
      <img src="../img/timg.jpg" />
    </div>
    <div class="item">
      <img src="../img/boot.png" />
    </div>
 </div>

如果需要给图片添加自定义内容,可以通过一个 class="carousel-caption" 的容器来添加标题和说明。

 <div class="carousel-inner" >
    <div class="item active">
      <img src="../img/timg.jpg" />
      <div class="carousel-caption">
        <h4>Second Thumbnail label</h4>
        <p>Cras justo odio, dapibus ...</p>
      </div>
    </div>
    <div class="item">
      <img src="../img/boot.png" />
      <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。data-slide 属性定义播放顺序,取值 "prev" 表示播放上一个条目,取值 "next" 表示播放下一个条目。

<a class="carousel-control left"  href="#myBanner" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myBanner" data-slide="next">&rsaquo;</a>

1.png


调用方式

1. 通过data数据属性

如果不想编写JavaScript代码,就可以使用 data 属性来调用轮播插件,并实现与轮播插件的交互功能。轮播插件需要两个交互功能:一个是点击控制按钮进行切换,一个是点击轮播指示器的小圆点进行切换。

1) 如果希望用户点击控制按钮进行切换,只需为左侧按钮提供 data-slide="prev" 属性,为右侧按钮提供 data-slide="next" 属性即可。

<a class="carousel-control left"  href="#myBanner" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myBanner" data-slide="next">&rsaquo;</a>

2)如果希望用户点击轮播指示器的小圆点进行切换,需要为轮播指示器的 元素提供 data-target 和 data-slide-to 属性。data-target 属性的值为轮播包含框的 id,data-slide-to 属性的值为点击小圆圈后,要切换到的轮播条目的索引,即 class="item" 元素的索引,索引从 0 开始。

 <ol class="carousel-indicators">
    <li data-target="#myBanner" data-slide-to="0"></li>
    <li data-target="#myBanner" data-slide-to="1"></li>
    <li data-target="#myBanner" data-slide-to="2" class="active"></li>
 </ol>

2. 通过JavaScript调用轮播

JavaScript调用轮番其实很简单,只需在脚本中调用 carousel() 方法。
Bootstrap还提供了其它一些方法,可以根据需要选择使用:

  • .carousel('cycle'):从左向右循环播放。
  • .carousel('pause'):暂停循环播放。
  • .carousel(number):循环到指定帧(下标从0开始,类似数组)。
  • .carousel('prev'):返回到上一帧。
  • .carousel('next'):播放下一帧。

通过JavaScript调用,虽然轮番可以自动播放,但两个控制按钮还无法正常工作。这时,就可以调用 carousel("prev") 和 carousel("next") 方法,来实现交互功能。

$('.carousel a.left').click(function(){
   
   
      $('.carousel').carousel("prev");
});
$('.carousel a.right').click(function(){
   
   
      $('.carousel').carousel("next");
});

轮播插件的选项

名称 类型 默认值 说明
interval number 5000 自动循环时,每个项目延迟的时间量。如果为 false,轮播将不会自动循环
pause string "hover" 当鼠标进入轮番区域时,暂停循环,鼠标移出时继续循环
wrap boolean true 轮播是否连续循环
keyboard boolean true 轮播是否对键盘事件作出反应

调用 carousel() 方法时,可以将这些选项作为一个对象参数。如下,每个图片显示1秒 :

$('.carousel').carousel(({
   
   
    interval: 1000
});

轮播图事件

事件 含义
slide.bs.carousel 当 slide 实例方法被调用时,立即触发该事件
slid.bs.carousel 当切换完一帧后,触发该事件
$('#myBanner').on('slide.bs.carousel', function () {
   
   
    alert('1');
})

就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
|
4天前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
2天前
|
资源调度 前端开发 JavaScript
Bootstrap日期选择器插件bootstrap-datepicker
Bootstrap日期选择器插件bootstrap-datepicker
27 12
|
13天前
|
JavaScript 前端开发
基于SVG的js圆形菜单插件
这是一款基于SVG的js圆形菜单插件。该js圆形菜单插件可以生成漂亮的圆形菜单效果,支持二级菜单,支持使用鼠标滚动切换菜单
41 16
|
9天前
|
JavaScript
时尚简洁的js轮播图特效插件
这是一款时尚简洁的js轮播图特效插件。该轮播图采用es6语法制作,底部带缩略图和描述信息。图片和描述信息在切换时同步滑动。
|
28天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
6天前
|
JavaScript 前端开发 异构计算
兼容移动手机的js拖拽插件Draggin.js
兼容移动手机的js拖拽插件Draggin.js
15 1
|
7天前
|
前端开发 JavaScript
bootstrap右键菜单插件
这是一款基于bootstrap的jquery右键菜单插件。该bootstrap右键菜单使用Bootstrap dropdown组件来制作,并通过tether插件进行定位,具有多级菜单,灵活,响应式等特点
|
23天前
|
Web App开发 JavaScript iOS开发
JS弹出式QQ在线客服插件
JS弹出式QQ在线客服插件
25 6
|
27天前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
33 5
|
1月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?