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

示例：

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

可选的标题

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

  <img alt="first" src="~/Images/02.png" />

  <div class="carousel-caption">标题 2</div>

选项

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

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

设置轮播时间间隔为2000ms.

$('#myCarousel1').carousel({

    interval: 2000

});

全部html

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Scrollspy</title>

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-2.1.3.min.js"></script>

    <script src="~/Scripts/bootstrap.min.js"></script>

</head>

<body>

    <h2>Carousel</h2>

    <div id="myCarousel1" class="carousel slide" data-interval="5000">

        @*轮播指标*@

        <ol class="carousel-indicators">

            <li data-target="#myCarousel1" data-slide-to="0" class="active"></li>

            <li data-target="#myCarousel1" data-slide-to="1"></li>

            <li data-target="#myCarousel1" data-slide-to="2"></li>

            <li data-target="#myCarousel1" data-slide-to="3"></li>

        </ol>

        @*轮播项目*@

        <div class="carousel-inner">

            <div class="item active">

                <img alt="first" src="~/Images/01.png" />

                <div class="carousel-caption">标题 1</div>

            </div>

            <div class="item">

                <img alt="first" src="~/Images/02.png" />

                <div class="carousel-caption">标题 2</div>

            </div>

            <div class="item">

                <img alt="first" src="~/Images/03.png" />

                <div class="carousel-caption">标题 3</div>

            </div>

            <div class="item">

                <img alt="first" src="~/Images/04.png" />

                <div class="carousel-caption">标题 4</div>

            </div>

        </div>

    </div>

    <!-- 轮播（Carousel）导航 -->

    <a class="carousel-control left" href="#myCarousel1"

        data-slide="prev">&lsaquo;</a>

    <a class="carousel-control right" href="#myCarousel1"

        data-slide="next">&rsaquo;</a>

    <script>

        $(function () {

            $('#myCarousel1').carousel({

                interval: 2000

            });

        })

    </script>

</body>

</html>

本节完

bootstrap 学习笔记 轮播（Carousel）插件的更多相关文章

  1. Bootstrap 历练实例-轮播(carousel)插件的事件

    事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...

  2. Bootstrap 历练实例-轮播(carousel)插件方法

    方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...

  3. Bootstrap 轮播(Carousel)插件

    轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是非常灵活的.可是图像,内嵌框架,视频或者其它您想的放置任何内容的类型. 下面是一个简单的幻灯片,使用轮播(carousel)插件显示 ...

  4. 2.bootstrap练习笔记-轮播图

    bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...

  5. JS学习笔记--轮播图效果

    希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...

  6. bootstrap学习笔记之四（javascript插件）

    下面展现四个插件的用法,一般插件的功能可以用两种方法实现,一种是引入bootstrap.js后,通过添加data属性实现,另一种则是通过js代码是实现. 第一个插件:下拉菜单的实现 第一种方法:dat ...

  7. Bootstrap 学习笔记13 附加导航插件

    附加导航代码: <style> a:focus { outline: none; } .nav-pills { width: 150px; } .nav-pills.affix { top ...

  8. Bootstrap 学习笔记7 模态框插件

    网站弹出框使用: 基本使用: <!-- 模态框的声明 --> <div class="modal" id="myModal" tabindex ...

  9. 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

随机推荐

  1. 【Trie】【kd-tree】计蒜客17122 2017 ACM-ICPC 亚洲区（西安赛区）网络赛 I. Barty's Computer

    题意:2种操作:①往集合里添加一个串 ②给你四个小串a b c d,问你集合里有几个串S满足S=a+S1+b+c+S2+d的形式.S1 S2可以为空,并且a+S1+b=c+S2+d. 就搞四颗Trie ...

  2. 【扫描线】Gym - 100781G - Goblin Garden Guards

    平面上有100000个哥布林和20000个圆,问你不在圆内的哥布林有多少个. 将每个圆从左到右切2r+1次,形成(2r+1)*2个端点,将上端点记作入点,下端点记作出点,再将这些点和那些哥布林一起排序 ...

  3. Hiho----无间道之并查集

    题目: 时间限制:20000ms 单点时限:1000ms 内存限制:256MB 描述 这天天气晴朗.阳光明媚.鸟语花香,空气中弥漫着春天的气息……额,说远了,总之,小Hi和小Ho决定趁着这朗朗春光出去 ...

  4. HDU 3360 National Treasures（二分匹配，最小点覆盖）

    National Treasures Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  5. Spring WebSocket入门(一) 转载

    本文转载自:http://www.jianshu.com/p/60799f1356c5 WebSocket是html5带来的一项重大的特性,使得浏览器与服务端之间真正长连接交互成为了可能,这篇文章会带 ...

  6. 在 Android Studio 2.2 中愉快地使用 C/C++

    转载请注明出处:http://blog.csdn.net/wl9739/article/details/52607010 注:官网上面的技术文章也在不断地汉化中,只是进度有点慢.在我翻译本篇文章的时候 ...

  7. 对Emlog 6.0 Beta的完整代码审计过程

    Emlog 6.0 beta版本,这可能是最后一篇关于PHP语言CMS的代码审计文章,此次将详细记录完整的审计过程. 文章基本上完整记录小东的对此CMS审计过程,或许显得繁琐,但代码审计的过程就是这样 ...

  8. 【转载】【Todo】银弹与我们的职业

    看到一段文字,不得不单独拎出来. 然后再借用一下g9老大的<银弹和我们的职业>中的话: 银弹和我们的职业发展有什么相干?很简单:我们得把时间用于学习解决本质困难.新技术给高手带来方便.菜鸟 ...

  9. （C语言版）链表（四）——实现双向循环链表创建、插入、删除、释放内存等简单操作

    双向循环链表是基于双向链表的基础上实现的,和双向链表的操作差不多,唯一的区别就是它是个循环的链表,通过每个节点的两个指针把它们扣在一起组成一个环状.所以呢,每个节点都有前驱节点和后继节点(包括头节点和 ...

  10. python3将docx转换成pdf,html文件,pdf转doc文件

    直接上代码 # -*- encoding:utf-8 -*- """ author:lgh 简单的doc转pdf,html,pdf转doc脚本 依赖库pdfminer3k ...