一、轮播图

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. Netatalk CVE-2018–1160 越界访问漏洞分析

    编译安装 首先下载带有漏洞的源代码 https://sourceforge.net/projects/netatalk/files/netatalk/3.1.11/ 安装一些依赖库(可能不全,到时根据 ...

  2. Android根据图片Uri获取图片path绝对路径的几种方法【转】

    在Android 编程中经常会用到Uri转化为文件路径,如我们从相册选择图片上传至服务器,一般上传前需要对图片进行压缩,这时候就要用到图片的绝对路径. 下面对我开发中uri转path路径遇到的问题进行 ...

  3. Android深入四大组件（七）Service的绑定过程

    前言 我们可以通过调用Context的startService来启动Service,也可以通过Context的bindService来绑定Service,建议阅读此篇文章前请阅读Android深入四大 ...

  4. java调用python的惨痛史(无法获取环境变量)

    环境:java,was,python2.6,红帽linux,oracle,python用cx_Oracle        事情是这样的,有个需求,需要对数据库进行处理,简单说就是把数据取出来,用pyt ...

  5. apache 访问权限出错，apache selinux 权限问题， (13) Permission Denied

    今天在使用 httpd 做文件服务器的时候,发现 png 图像没有打开,但是原本www/html 文件夹内部的文件就可以打开.后来猜测是selinux 的问题,之前一直想写一篇关于selinux 的博 ...

  6. 使用缓存方式优化递归函数与lru_cache

    一.递归函数的弊端 递归函数虽然编写时用很少的代码完成了庞大的功能,但是它的弊端确实非常明显的,那就是时间与空间的消耗. 用一个斐波那契数列来举例 import time #@lru_cache(20 ...

  7. HDU ACM 1879 继续畅通工程

    继续畅通工程 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  8. Leviticus

    The head is empty and empty. Just practicing English will not have any effect. The best effect is to ...

  9. Python3编写网络爬虫09-数据存储方式二-JSON文件存储

    2.JSON文件存储 全称为JavaScript Object Notation 通过对象和数组的组合来表示数据,构造简洁且结构化程度非常高.是一种轻量级的数据交换格式 2.1 对象和数组 在Java ...

  10. oracle中nvarchar2字符集不匹配

    oracle当多表union时遇到nvarchar2类型时报错 字符集不匹配对使用nvarchar的地方,加上 to_char( nvarchar 的变量或字段 ) 如:select to_char( ...