<!DOCTYPE html>

 <html lang="zh-CN">

   <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

     <title>Bootstrap 轮播图</title>

     <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">

     <!--[if lt IE 9]>

       <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

       <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

     <![endif]-->

     <style>

       img {

         width: 100%;

         height: 100%;

       }

       p {

         text-align: center;

       }

     </style>

   </head>

   <body>

     <!-- 轮播图部分 -->

     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

       <!-- Indicators -->

       <!-- 指示器 -->

       <ol class="carousel-indicators">

         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

         <li data-target="#carousel-example-generic" data-slide-to="1"></li>

         <li data-target="#carousel-example-generic" data-slide-to="2"></li>

       </ol>

       <!-- Wrapper for slides -->

       <!-- 包裹幻灯片 -->

       <div class="carousel-inner" role="listbox">

         <div class="item active">

           <img src="data:images/轮播1.png" alt="轮播图1">

           <div class="carousel-caption">

             轮播图1

           </div>

         </div>

         <div class="item">

           <img src="data:images/轮播2.png" alt="轮播图2">

           <div class="carousel-caption">

             轮播图2

           </div>

         </div>

         <div class="item">

           <img src="data:images/轮播3.png" alt="轮播图3">

           <div class="carousel-caption">

             轮播图3

           </div>

         </div>

         <p>轮播图尝试</p>

       </div>

       <!-- Controls -->

       <!-- 控制 -->

       <!-- 向左滑动 -->

       <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

         <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>

         <span class="sr-only">Previous</span>

       </a>

       <!-- 向右滑动 -->

       <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

         <span class="sr-only">Next</span>

       </a>

     </div>

     <!-- js控制轮播图 -->

     <button id="prev">向前</button>

     <button id="next">向后</button>

     <button id="pause">停止</button>

     <button id="start">开始</button>

     <button id="jump">到第二张</button>

     <script src="lib/jquery/jquery.js"></script>

     <script src="lib/bootstrap/js/bootstrap.js"></script>

     <!-- 轮播图还支持js控制 -->

     <script>

       $(function(){

         $('.carousel').carousel({

           interval: 2000,//轮播间隔

           pause:"hover", //鼠标悬停在轮播图上，是否停止滚动

           wrap:true,     //

           keyboard:true  //响应键盘事件

         });

         $("#prev").click(function(event) {

           $('.carousel').carousel('prev')// 周期上一个项目。

         });

         $("#next").click(function(event) {

           $('.carousel').carousel('next')// 周期到下一个项目。

         });;

         $("#pause").click(function(event) {

           $('.carousel').carousel('pause')// 从通过项目循环停止传送带。

         });;

         $("#start").click(function(event) {

           $('.carousel').carousel('cycle')// 通过传送带项目周期从左到右。

         });;

         $("#jump").click(function(event) {

           $('.carousel').carousel(1)// 循环传送带到一个特定的帧（0为主，类似于数组）。

         });;

       });

     </script>

   </body>

 </html>

注意引入.css和.js 文件查看效果（里面有三张图片，随便找几张代替便可）

Bootstrap 我的学习记录4 轮播图的使用和理解的更多相关文章

  1. BootStrap学习(7)_轮播图

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

  2. 使用bootstrap建立响应式网页——通栏轮播图（carousel）

    1.bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...

  3. Bootstrap 轮播图的使用和理解

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

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

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

  5. 6_bootstrap之导航条|轮播图|排版|表单元素|分页

    8.导航条 BootStrap已经提供了完整的导航条实例,通常情况下,我们仅需进行简单修改即可使用. 帮助手册位置:组件-------导航条 9.轮播图 BootStrap已经提供了完整的轮播图实例, ...

  6. jQuery---bootstrap的下载使用,栅格(12个格子),轮播图,矢量图字体图标,进度条,选项卡,标签,表达校验

    jQuery---bootstrap的下载使用,栅格(12个格子),轮播图,矢量图字体图标,进度条,选项卡,标签,表达校验 一丶bootstrap的使用 下载资源文件: bootstrap官网 导入 ...

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

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

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

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

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

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

随机推荐

  1. android html 与webview属性从冲突

    在最近的项目开发中,使用webview加载html页面,这样可以节省大量页面开发的时间,同时也可加快项目进度. 我们需求是需要显示商品评论,页面设计如下: 调用android代码,对于webview的 ...

  2. sublime返回上一编辑位置

    用了sublime好长时间了,最近发现一个python插件可以在编辑的时候返回上一编辑位置,这个功能在eclipse很常用,现在终于能在sublime上使用了.好爽. 贴个地址:https://for ...

  3. Changing Project Binding to Surround SCM Integration Provider with Visual Studio 2010

    Changing Project Binding to Surround SCM Integration Provider with Visual Studio 2010 Sarah Wigser t ...

  4. CSS之边框覆盖

    今天想做一个淘宝导航来练练手,遇到了边框覆盖的问题.如下图: li的红色边框盖不住该灰色边框.后来问经验人士告诉我,这种边框覆盖是会出现无法100%保证正常的情况,遂得到如下3中解决方案: 1.以后遇 ...

  5. 顺序图（Sequence Diagram）

    顺序图(Sequence Diagram)对系统的动态方面来建模. 顺序图是强调消息时间顺序的交互图. 协作图则是强调接收和发送消息的对象的结构组织的交互图 如何对动态方面建模?  所谓动态文面,即 ...

  6. c/c++: c++继承 内存分布 虚表 虚指针 （转）

    http://www.cnblogs.com/DylanWind/archive/2009/01/12/1373919.html 前部分原创,转载请注明出处,谢谢! class Base  {  pu ...

  7. Android 2.1 和 Android 4.4 工程目录超详细对比及详解

    在搭建Android开发环境及简单地建立一个HelloWorld项目后,本篇将通过HelloWorld项目来介绍Android项目的目录结构.本文的主要主题如下: 1.1.HelloWorld项目的目 ...

  8. Java知多少（105）套接字(Socket)

    网络应用模式主要有: 主机/终端模式:集中计算,集中管理: 客户机/服务器(Client/Server,简称C/S)模式:分布计算,分布管理: 浏览器/服务器模式:利用Internet跨平台. www ...

  9. 剑指架构师系列-InnoDB存储引擎、Spring事务与缓存

    事务与锁是不同的.事务具有ACID属性: 原子性:持久性:由redo log重做日志来保证事务的原子性和持久性,一致性:undo log用来保证事务的一致性隔离性:一个事务在操作过程中看到了其他事务的 ...

  10. 精品素材：WALK & RIDE 单页网站模板下载

    今天,很高兴能向大家分享一个响应式的,简约风格的 HTML5 单页网站模板.Walk & Ride 这款单页网站模板是现代风格的网页模板,简洁干净,像素完美,特别适合用于推广移动 APP 应用 ...