一、轮播图

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. JS笔记（二）：对象

    (一) 对象 对象是JS的基本数据类型,类似于python的字典.然而对象不仅仅是键值对的映射,除了可以保持自有的属性,JS对象还可以从一个称为原型的对象继承属性,对象的方法通常是继承的属性.(这种对 ...

  2. 洗礼灵魂，修炼python（25）--自定义函数（6）—从匿名函数进阶话题讲解中解析“函数式编程”

    匿名函数进阶 前一章已经说了匿名函数,匿名函数还可以和其他内置函数结合使用 1.map map():映射器,映射 list(map(lambda x:x*2,range(10))) #把range产生 ...

  3. Json Schema的使用

    直接上案例: 在Web Api通讯中,客户端发送json数据,服务端反序列化json(json与某个类形成对应关系),在某些情况下,需要校验其上传的json是否合法. 服务端是使用Json.net(n ...

  4. python五十六课——正则表达式（常用函数之compile()）

    2).compile(regex,[flags=0]):返回一个Pattern对象(认为:它内部已经封装了一套regex和flags) 可以再通过Pattern对象继续调用match函数(此时只需要传 ...

  5. Java自定义类加载和ClassPath类加载器

    1 自定义类加载器: 实现规则: 自定义类加载器,需要重写findClass,然后通过调用loadClass进行类加载(loadClass通过递归实现类的双亲委派加载) package com.dax ...

  6. php 对象教程

    [PHP面向对象(OOP)编程入门教程]6.如何去使用对象中的成员 作者:qianyunlai.com  发布于:2012-05-19 15:02  分类:PHP基础  浏览(280) 上面看到PHP ...

  7. go标准库的学习-io

    参考https://studygolang.com/pkgdoc 导入方式: import "io" o包提供了对I/O原语的基本接口.本包的基本任务是包装这些原语已有的实现(如o ...

  8. oracle批量插入数据（测试）

    做数据库开发或管理的人经常要创建大量的测试数据,动不动就需要上万条,如果一条一条的录入,那会浪费大量的时间,本文介绍了Oracle中如何通过一条 SQL快速生成大量的测试数据的方法.产生测试数据的SQ ...

  9. js == 与 === 的区别[转]

    we文章转自http://blog.sina.com.cn/s/blog_4b32835b01014iv9.html 1.对于string,number等基础类型,==和===是有区别的 1)不同类型 ...

  10. leetcode 104. Maximum Depth of Binary Tree 111. Minimum Depth of Binary Tree

    104: class Solution { public: int maxDepth(TreeNode* root) { if(root == NULL) ; int left = maxDepth( ...