一、轮播图

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

如果您想要单独引用该插件的功能，那么您需要引用BootStrap中的 carousel.js。

示例:

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

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title></title>

    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />

    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    <style type="text/css" >

        img {

        width:500px;

        height:400px;

        }

        #img {

        width:500px;

        height:400px;

        }

    </style>

</head>

<body style="margin-top: 20px; margin-left: 20px;">

    <div id="img">

  <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000">

   <!-- 轮播（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="../Imgs/img1/pic1.jpg" alt="first" />

           <div class="carousel-caption">企鹅</div>

      </div>

      <div class="item">

          <img src="../Imgs/img1/pic21.jpg" alt="seconed"/>

      </div>

      <div class="item">

          <img src="../Imgs/img1/pic31.jpg" alt="third" />

          <div class="carousel-caption">考拉</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>

        </div>

</body>

</html>

效果:

用法:

  • 通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。

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

选项

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

方法

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

方法 描述 实例
.carousel(options) 初始化轮播为可选的 options 对象，并开始循环项目。 
$('#identifier').carousel({

  interval: 2000

})
.carousel('cycle') 从左到右循环轮播项目。 
$('#identifier').carousel('cycle')
.carousel('pause') 停止轮播循环项目。 
$('#identifier')..carousel('pause')
.carousel(number) 循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。 
$('#identifier').carousel(number)
.carousel('prev') 循环轮播到上一个项目。 
$('#identifier').carousel('prev')
.carousel('next') 循环轮播到下一个项目。 
$('#identifier').carousel('next')

事件

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

事件 描述 实例
slide.bs.carousel 当调用 slide 实例方法时立即触发该事件。 
$('#identifier').on('slide.bs.carousel', function () {

  // 执行一些动作...

})
slid.bs.carousel 当轮播完成幻灯片过渡效果时触发该事件。 
$('#identifier').on('slid.bs.carousel', function () {

  // 执行一些动作...

})

  即:切换图片时会触发事件

BootStrap学习(7)_轮播图的更多相关文章

  1. Bootstrap 我的学习记录4 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  2. Bootstrap中手指控制轮播图切换

    通过手指的滑动来控制轮播图中的图片内容的切换 // 1. 获取手指在轮播图元素上的一个滑动方向(左右) // 获取界面上的轮播图容器 var $carousels = $('.carousel'); ...

  3. Bootstrap 学习笔记12 轮播插件

    轮播插件: <!-- data-ride="carousel"自动播放 --> <div id="myCarousel" class=&quo ...

  4. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  5. <day006>bootstrap的简单学习 + 轮播图

    任务1:bootstrap的简单学习 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...

  6. BootStrap学习(三)——重写首页之导航栏和轮播图

    1.按钮 1)帮助文档:http://v3.bootcss.com/css/#buttons 2).btn-lg..btn-sm..btn-xs可以设置按钮的不同尺寸 3).active类设置按钮的激 ...

  7. JS框架_(Bootstrap.js)实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

  8. Bootstrap 学习笔记 项目实战 响应式轮播图

    左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...

  9. 第二百五十一节，Bootstrap项目实战--响应式轮播图

    Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一．响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...

随机推荐

  1. 解决ArrayList线程不安全

    前些天做项目时,程序出现意外的问题,经后来分析是使用ArrayList这个线程不安全的方法导致 解决这个问题通常有两种方法(个人认为) 一:使用synchronized关键字,这个大家应该都很熟悉了, ...

  2. HBase中此类异常解决记录org.apache.hadoop.ipc.RemoteException(java.io.IOException):

    ERROR: Can't get master address from ZooKeeper; znode data == null   一定注意这只是问题的第一层表象,真的问题是: File /hb ...

  3. [20171120]11G关闭直接路径读.txt

    [20171120]11G关闭直接路径读.txt --//今天做filesystemio_options参数测试时,遇到一个关于直接路径读的问题.--//如果看以前的博客介绍,设置"_ser ...

  4. python第二天 列表、元组

    今天学习了列表.元组相关的知识:与C中的数组列表相似,元组为只读列表: 以及切片相关操作: #!usr/bin/env python #-*-coding:utf-8-*- # Author calm ...

  5. Fedroa 28 php 和 mail 命令，邮件发不出去

    问题:在配置服务中,发现本地命令mail 和 php 邮件函数的邮件发送不出去. 解决方案: 安装 MTA 服务: postfix , sendmail 等. MTA 为 邮件传输代理 想要了解Lin ...

  6. [HDFS_4] HDFS 的 Java 应用开发

    0. 说明 在 IDEA下 进行 HDFS 的 Java 应用开发 通过编写代码实现对 HDFS 的增删改查操作 1. 流程 1.1 在项目下新建 Moudle 略 1.2 为 Moudle 添加 M ...

  7. mysql状态分析之show global status（转）

    mysql> show global status;可以列出MySQL服务器运行各种状态值,我个人较喜欢的用法是show status like '查询值%';一.慢查询mysql> sh ...

  8. if 嵌套if 的先后顺序的区别 (自测)

    # 验证 verify very good! # username = input("请输入用户名").capitalize()# password = input("请 ...

  9. Django基础之urls

    一  Django简介 二   视图层之应用系统 一  Django简介 Django:   urls:路径与视图函数的映射关系   views:逻辑处理   models:与数据库相关的操作   t ...

  10. JDK文档中关于Semaphore的正确使用以及使用场景

    import java.util.concurrent.Semaphore; /** * * JDK文档使用备注:<br> * Semaphores are often used to r ...