简单好用的轮播效果..Bootstrap 轮播（Carousel）插件

最新推荐文章于 2022-06-04 10:22:23 发布
最新推荐文章于 2022-06-04 10:22:23 发布
阅读量445 收藏
点赞数
分类专栏： bootstrap 文章标签： bootstrap 插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yongbin668/article/details/51518562
版权

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

如果您想要单独引用该插件的功能，那么您需要引用  carousel.js。或者，正如  Bootstrap 插件概览 一章中所提到，您可以引用  bootstrap.js 或压缩版的  bootstrap.min.js。

实例

下面是一个简单的幻灯片，使用 Bootstrap 轮播（Carousel）插件显示了一个循环播放元素的通用组件。为了实现轮播，您只需要添加带有该标记的代码即可。不需要使用 data 属性，只需要简单的基于 class 的开发即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
< html >
< head >
    < title >Bootstrap 实例 - 简单的轮播（Carousel）插件</ title >
    < link  href = "/bootstrap/css/bootstrap.min.css"  rel = "stylesheet" >
    < script  src = "/scripts/jquery.min.js" ></ script >
    < script  src = "/bootstrap/js/bootstrap.min.js" ></ script >
</ head >
< body >
 
< div  id = "myCarousel"  class = "carousel slide" >
    <!-- 轮播（Carousel）指标 -->
    < ol  class = "carousel-indicators" >
       < li  data-target = "#myCarousel"  data-slide-to = "0"  class = "active" ></ li >
       < li  data-target = "#myCarousel"  data-slide-to = "1" ></ li >
       < li  data-target = "#myCarousel"  data-slide-to = "2" ></ li >
    </ ol >  
    <!-- 轮播（Carousel）项目 -->
    < div  class = "carousel-inner" >
       < div  class = "item active" >
          < img  src = "/media/uploads/2014/07/slide1.png"  alt = "First slide" >
       </ div >
       < div  class = "item" >
          < img  src = "/media/uploads/2014/07/slide2.png"  alt = "Second slide" >
       </ div >
       < div  class = "item" >
          < img  src = "/media/uploads/2014/07/slide3.png"  alt = "Third slide" >
       </ div >
    </ div >
    <!-- 轮播（Carousel）导航 -->
    < a  class = "carousel-control left"  href = "#myCarousel"
       data-slide = "prev" >&lsaquo;</ a >
    < a  class = "carousel-control right"  href = "#myCarousel"
       data-slide = "next" >&rsaquo;</ a >
</ div >
 
</ body >
</ html >

结果如下所示：

简单的轮播（Carousel）插件

可选的标题

您可以通过 .item 内的 .carousel-caption 元素向幻灯片添加标题。只需要在该处放置任何可选的 HTML 即可，它会自动对齐并格式化。下面的实例演示了这点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
< html >
< head >
    < title >Bootstrap 实例 - 轮播（Carousel）插件的标题</ title >
    < link  href = "/bootstrap/css/bootstrap.min.css"  rel = "stylesheet" >
    < script  src = "/scripts/jquery.min.js" ></ script >
    < script  src = "/bootstrap/js/bootstrap.min.js" ></ script >
</ head >
< body >
 
< div  id = "myCarousel"  class = "carousel slide" >
    <!-- 轮播（Carousel）指标 -->
    < ol  class = "carousel-indicators" >
       < li  data-target = "#myCarousel"  data-slide-to = "0"  class = "active" ></ li >
       < li  data-target = "#myCarousel"  data-slide-to = "1" ></ li >
       < li  data-target = "#myCarousel"  data-slide-to = "2" ></ li >
    </ ol >  
    <!-- 轮播（Carousel）项目 -->
    < div  class = "carousel-inner" >
       < div  class = "item active" >
          < img  src = "/media/uploads/2014/07/slide1.png"  alt = "First slide" >
          < div  class = "carousel-caption" >标题 1</ div >
       </ div >
       < div  class = "item" >
          < img  src = "/media/uploads/2014/07/slide2.png"  alt = "Second slide" >
          < div  class = "carousel-caption" >标题 2</ div >
       </ div >
       < div  class = "item" >
          < img  src = "/media/uploads/2014/07/slide3.png"  alt = "Third slide" >
          < div  class = "carousel-caption" >标题 3</ div >
       </ div >
    </ div >
    <!-- 轮播（Carousel）导航 -->
    < a  class = "carousel-control left"  href = "#myCarousel"
       data-slide = "prev" >&lsaquo;</ a >
    < a  class = "carousel-control right"  href = "#myCarousel"
       data-slide = "next" >&rsaquo;</ a >
</ div >
 
 
</ body >
</ html >

结果如下所示：

轮播（Carousel）插件的标题

用法

  • 通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。
    • 属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
    • 使用 data-slide-to 来向轮播床底一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。
    • data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。
  • 通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示：
    1
    $('.carousel').carousel()

选项

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

选项名称类型/默认值Data 属性名称描述
intervalnumber
默认值：5000		data-interval自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。
pausestring
默认值："hover"		data-pause鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
wrapboolean
默认值：true		data-wrap轮播是否连续循环。

方法

下面是一些轮播（Carousel）插件中有用的方法：

方法描述实例
.carousel(options)初始化轮播为可选的 options 对象，并开始循环项目。
1
2
3
$('#identifier').carousel({
   interval: 2000
})
.carousel('cycle')从左到右循环轮播项目。
1
$('#identifier').carousel('cycle')
.carousel('pause')停止轮播循环项目。
1
$('#identifier')..carousel('pause')
.carousel(number)循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。
1
$('#identifier').carousel(number)
.carousel('prev')循环轮播到上一个项目。
1
$('#identifier').carousel('prev')
.carousel('next')循环轮播到下一个项目。
1
$('#identifier').carousel('next')

实例

下面的实例演示了方法的用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
< html >
< head >
    < title >Bootstrap 实例 - 轮播（Carousel）插件方法</ title >
    < link  href = "/bootstrap/css/bootstrap.min.css"  rel = "stylesheet" >
    < script  src = "/scripts/jquery.min.js" ></ script >
    < script  src = "/bootstrap/js/bootstrap.min.js" ></ script >
</ head >
< body >
 
< div  id = "myCarousel"  class = "carousel slide" >
    <!-- 轮播（Carousel）指标 -->
    < ol  class = "carousel-indicators" >
       < li  data-target = "#myCarousel"  data-slide-to = "0"
          class = "active" ></ li >
       < li  data-target = "#myCarousel"  data-slide-to = "1" ></ li >
       < li  data-target = "#myCarousel"  data-slide-to = "2" ></ li >
    </ ol >  
    <!-- 轮播（Carousel）项目 -->
    < div  class = "carousel-inner" >
       < div  class = "item active" >
          < img  src = "/media/uploads/2014/07/slide1.png"  alt = "First slide" >
       </ div >
       < div  class = "item" >
          < img  src = "/media/uploads/2014/07/slide2.png"  alt = "Second slide" >
       </ div >
       < div  class = "item" >
          < img  src = "/media/uploads/2014/07/slide3.png"  alt = "Third slide" >
       </ div >
    </ div >
    <!-- 轮播（Carousel）导航 -->
    < a  class = "carousel-control left"  href = "#myCarousel"
       data-slide = "prev" >&lsaquo;</ a >
    < a  class = "carousel-control right"  href = "#myCarousel"
       data-slide = "next" >&rsaquo;</ a >
    <!-- 控制按钮 -->
    < div  style = "text-align:center;" >
       < input  type = "button"  class = "btn start-slide"  value = "Start" >
       < input  type = "button"  class = "btn pause-slide"  value = "Pause" >
       < input  type = "button"  class = "btn prev-slide"  value = "Previous Slide" >
       < input  type = "button"  class = "btn next-slide"  value = "Next Slide" >
       < input  type = "button"  class = "btn slide-one"  value = "Slide 1" >
       < input  type = "button"  class = "btn slide-two"  value = "Slide 2" >           
       < input  type = "button"  class = "btn slide-three"  value = "Slide 3" >
    </ div >
</ div >
< script >
    $(function(){
       // 初始化轮播
       $(".start-slide").click(function(){
          $("#myCarousel").carousel('cycle');
       });
       // 停止轮播
       $(".pause-slide").click(function(){
          $("#myCarousel").carousel('pause');
       });
       // 循环轮播到上一个项目
       $(".prev-slide").click(function(){
          $("#myCarousel").carousel('prev');
       });
       // 循环轮播到下一个项目
       $(".next-slide").click(function(){
          $("#myCarousel").carousel('next');
       });
       // 循环轮播到某个特定的帧
       $(".slide-one").click(function(){
          $("#myCarousel").carousel(0);
       });
       $(".slide-two").click(function(){
          $("#myCarousel").carousel(1);
       });
       $(".slide-three").click(function(){
          $("#myCarousel").carousel(2);
       });
    });
</ script >
 
 
</ body >
</ html >

结果如下所示：

轮播（Carousel）插件方法

事件

下表列出了轮播（Carousel）插件中要用到的事件。这些事件可在函数中当钩子使用。

事件描述实例
slide.bs.carousel当调用 slide 实例方法时立即触发该事件。
1
2
3
$('#identifier').on('slide.bs.carousel', function () {
   // 执行一些动作...
})
slid.bs.carousel当轮播完成幻灯片过渡效果时触发该事件。
1
2
3
$('#identifier').on('slid.bs.carousel', function () {
   // 执行一些动作...
})

实例

下面的实例演示了事件的用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
< html >
< head >
    < title >Bootstrap 实例 - 轮播（Carousel）插件事件</ title >
    < link  href = "/bootstrap/css/bootstrap.min.css"  rel = "stylesheet" >
    < script  src = "/scripts/jquery.min.js" ></ script >
    < script  src = "/bootstrap/js/bootstrap.min.js" ></ script >
</ head >
< body >
 
< div  id = "myCarousel"  class = "carousel slide" >
    <!-- 轮播（Carousel）指标 -->
    < ol  class = "carousel-indicators" >
       < li  data-target = "#myCarousel"  data-slide-to = "0"
          class = "active" ></ li >
       < li  data-target = "#myCarousel"  data-slide-to = "1" ></ li >
       < li  data-target = "#myCarousel"  data-slide-to = "2" ></ li >
    </ ol >  
    <!-- 轮播（Carousel）项目 -->
    < div  class = "carousel-inner" >
       < div  class = "item active" >
          < img  src = "/media/uploads/2014/07/slide1.png"  alt = "First slide" >
       </ div >
       < div  class = "item" >
          < img  src = "/media/uploads/2014/07/slide2.png"  alt = "Second slide" >
       </ div >
       < div  class = "item" >
          < img  src = "/media/uploads/2014/07/slide3.png"  alt = "Third slide" >
       </ div >
    </ div >
    <!-- 轮播（Carousel）导航 -->
    < a  class = "carousel-control left"  href = "#myCarousel"
       data-slide = "prev" >&lsaquo;</ a >
    < a  class = "carousel-control right"  href = "#myCarousel"
       data-slide = "next" >&rsaquo;</ a >
</ div >
< script >
    $(function(){
       $('#myCarousel').on('slide.bs.carousel', function () {
          alert("当调用 slide 实例方法时立即触发该事件。");
       });
    });
</ script >
 
</ body >
</ html >

结果如下所示：

轮播（Carousel）插件事件


汇总实用代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
   <title>Bootstrap 实例 - 轮播（Carousel）插件事件</title>
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
   <script src="http://code.jquery.com/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>


<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
   <!-- 轮播（Carousel）指标 -->
   <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" 
         class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
   </ol>   
   <!-- 轮播（Carousel）项目 -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="banner1.png" alt="First slide">
      </div>
      <div class="item">
         <img src="banner2.png" alt="Second slide">
      </div>
      <div class="item">
         <img src="banner3.png" alt="Third slide">
      </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">&rsaquo;</a>
</div> 
</body>
</html>

[说明：感谢广大博友提供参考，本文仅供个人学习之用！]

Bootstrap 轮播（Carousel）插件
xinjiatao的专栏
07-10 1978
  Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。 如果您想要单独引用该插件的功能，那么您需要引用 carousel.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.m...
Bootstrap JavaScript插件：轮播插件 (carousel.js)
WangMin@汪末末
09-10 3048
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin Bootstrap 的轮播插件（carousel.js）是一个灵活的、响应式的、无缝循环播放的幻灯片切换插件，它的内容可以是图片、视频、或者其他任何内容。 整体结构 Bootstrap中的轮播由一个 class=“carousel” 的容器定义，其中包含轮播指示器、轮播内容、轮播的控制按钮。为了确保在播放时，能够对控制按钮和轮番指示器进行正常定位，需要为容器定义一个 id。 <div id=
bootstrap旋转轮播
07-24
旋转轮播（Carousel）这个插件有很多种译法，有人叫轮播，有人叫传送带，本书译为“旋转轮播”。其主要显示效果就像各大网站的400x600的多幅滚动广告一样，比如京东首页的大图片，默认情况下是循环向左轮播，如果单击某一小方块的话，会直接显示所单击的那张图。本插件不仅要实现这种效果，还实现定制化（也就是可以用javascript代码手动触发显示或者隐藏任意一张图片）
bootstrap 轮播插件
weixin_33939380的博客
05-30 93
       在公司实习无聊中。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;toggle&lt;/title&gt; &lt;meta name="viewport" content="width=device-width,initia
【轮播图】使用bootstrap轮播插件（Carousel）
qq_58460470的博客
06-04 1167
【轮播图】使用bootstrap轮播插件（Carousel）
BootStrap 轮播插件
刚哥的博客
07-21 434
‹     ›
BootStrap中jQuery插件Carousel实现轮播广告效果
12-29
轮播广告在网站中的应用实在是太常见了，下面说一说怎样使用bootstrap中的Carousel插件来实现轮播广告效果，下图为最终效果： 具体实现方法请看下面的代码： <div class=carousel data-ride=carousel id=carousel ...
响应式Carousel轮播图插件.zip
07-11
然而，原生的Bootstrap Carousel在某些复杂布局或特定屏幕尺寸下的表现可能不尽如人意，因此出现了这款响应式Carousel插件，旨在增强其功能，使其更适应多设备环境。 首先，我们来理解一下什么是响应式设计。响应式...
Bootstrap插件（八）——轮播（Carousel.js）
Andy_lau
09-26 8505
这一篇我们来学习一下bootstrap的轮播插件Carousel.js,我相信大家对于轮播已经熟悉的不能再熟悉了，基本上我们任意打开一个网站都会有轮播的元素。在以前需要我们通过js css html自己写，但是对于初学者来说还是比较难得人一件事，但是bootstrap为我们封装好了一个插件，只要简单的classl配置就能简单的实现轮播。OK接下来依然是先来看看我们的示例效果：  来看
Carousel.js
08-22
bootstrap框架插件Carousel.js，图片轮播插件。bootstrap的carousel.js可实现轮播图动画。
Bootstrap学习之Carousel
sina_panda
08-29 912
Carousel carousel.js 这是bootstrap的一个js插件，使用的时候需要引入bootstrap的库，而bootstrap的是在jQuery的基础下运行的。 script src="js/jquery-2.1.4.min.js">script> script src="js/bootstrap.min.js">script> A slideshow com
【前端开发】bootstrap框架：轮播（Carousel）
`雾博客
09-03 5464
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容 幻灯片 实现轮播，您只需要添加带有该标记的代码即可。不需要使用 data 属性 .slide：动画中的滑动类 .carousel：轮播图类 data-taret：为哪个结构服务 .carousel-indicators：轮播图指标 .caousel-inner：轮播图项目 .carousel-control：轮播图导航 ..
Bootstrap插件学习-（carousel.js）
yaly200的博客
09-20 622
Carouselcarousel.js A slideshow component for cycling through elements, like a carousel.Nested car...
Bootstrap 简单认识之Carousel组件
热门推荐
博客
03-02 1万+
Carousel（幻灯片）组件一、简介 往往用于首页轮流展示不同的图片，电商网站常见； 在IE8、9下没有图片滑动动画效果； 二、样式 下面给出的样式类并不完整从下面可以看出图片切换动画消耗的时间：/*from _carousel.scss*/ .carousel-item { /*...省略*/ @include transition($carousel-transitio
使用Bootstrap插件（Carousel）制作响应式轮播图
weixin_45026839的博客
02-19 1752
序言： 响应式轮播图制作后不管是大于768px的非移动端还是小于768px的移动端 都会加载所有资源，会导致页面的加载速度和解析效率降低 对移动端极其不利。所以我们需要手写js来动态创建 一、所要达到效果： w<768px-移动端：图片会随着屏幕的缩小自动适应–缩小 做法：将img的宽度为100%,通过img标签来实现 w>=768px： 图片做为背景，当屏幕宽度变宽的时候，会显示更多的图片的两边区域 做法： 1.background-image添加图片 2.添加background-po.
jQuery轮播效果（Carousell）
chenmo2001的博客
06-07 3075
jQuery轮播效果（Carousell） 轮播效果是一个幻灯片效果，使用CSS 3D变形转换和一些JavaScript构建---内容循环播放，它适用于一系列图像、文本或自定义标记，还包括对上一个/下一个图分浏览控制和指令支持。 在支持Page Visibility API（页面可见性）的浏览器中，当网页对用户不可见时（如浏览器选项卡处于非活动状态。窗口最小化时），轮播效果控件会停止运动，从而节省性能。 用法 通过数据属性 使用数据属性可以轻松控制转盘的位置。Data-slide接受关键字，p...
Bootstrap学习笔记--插件之Carousel插件轮播图片，模态插件，提示插件，滚动监听插件，Affix插件
qq_38409944的博客
05-28 1201
Carousel插件： 轮播插件。 是一个通过元素循环的组件，如旋转木马（幻灯片） 插件可以单独包含（使用Bootstrap“carousel.js”文件），或者一次全部使用（使用“bootstrap.js”或“bootstrap.min.js”）。 注意： 在Internet Explorer 9及更早版本中不被正确支持（因为它们使用CSS3转换和动画来实现幻灯片效果 举例： ...
Bootstrap快速入门之轮播效果&列表组&画像（图文框）&表单
m0_67768699的博客
05-02 1885
案例1：首页轮播图实现 1.什么是轮播效果(Carousel) 2.轮播效果的工作原理 3.包含字幕的轮播示例 案例2：首页书籍分类实现 1.什么是列组表 2..active列表(启用)状态示例 案例3：首页新书上架&热门书籍实现 1.什么是图文框 2.图文框示例 案例4：首页整合 案例5：实现登录&注册页面 1.Forms表单 2.Forms表单示例
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值