<!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 轮播图的使用和理解的更多相关文章

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

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

  2. bootstrap轮播图 两侧半透明阴影

    用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. ...

  3. bootstrap轮播图--兼容IE7

    <!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...

  4. 动态请求数据并放入bootstrap轮播图

    下面是前端代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  5. 第124天：移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

  6. bootstrap轮播图组件

    一.轮播图组件模板(官方文档) <div id="carousel-example-generic" class="carousel slide" dat ...

  7. bootstrap轮播图

    <!doctype html><html><head> <meta charset="utf-8"> <title>使用 ...

  8. Bootstrap 轮播图（Carousel）插件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. bootstrap轮播图不能显示左右箭头

    引入font文件夹即可 原文 :http://www.imooc.com/qadetail/64277

随机推荐

  1. 如何制作 Ubuntu 系统的 USB 启动盘

    下载 Ubuntu 打开 http://mirrors.ustc.edu.cn 获取安装镜像 --> 获取 ISO 刻录 Ubuntu 到 U 盘 打开 http://rufus.akeo.ie ...

  2. 解决区间第K大的问题的各种方法

    例题:http://poj.org/problem?id=2104 最近可能是念念不忘,必有回响吧,总是看到区间第k大的问题,第一次看到是在知乎上有人面试被弄懵了后来又多次在比赛中看到.以前大概是知道 ...

  3. CodeChef BIBOARD: Binary Board 命题报告

    这道题当时有了一点模糊的想法之后,构思了一整天-- 题意: 有一\(N \times M\)网格,每一格可以是白色或黑色.令\(B_i\)表示\(i \times i\)的纯黑子网格数量(子网格是指原 ...

  4. Nodejs实战 —— 测试 Node 程序

    读 <node.js实战2.0>,进行学习记录总结. 当当网购买链接 豆瓣网1.0链接 测试 Node 程序 本章内容 用 Node 的 assert 模块测试 使用其他断言库 使用 No ...

  5. [Real World Haskell翻译]第23章 GUI编程使用gtk2hs

    第23章 GUI编程使用gtk2hs 在本书中,我们一直在开发简单的基于文本的工具.虽然这些往往是理想的接口,但有时图形用户界面(GUI)是必需的.有几个Haskell的GUI工具包是可用的.在本章中 ...

  6. 成都Uber优步司机奖励政策（1月26日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  7. [并发并行]_[线程模型]_[Pthread线程使用模型之一管道Pipeline]

    场景 1.经常在Windows, MacOSX 开发C多线程程序的时候, 经常需要和线程打交道, 如果开发人员的数量不多时, 同时掌握Win32和pthread线程 并不是容易的事情, 而且使用Win ...

  8. Ubuntu 18启动失败 Started Hold until boot procss finishes up

    原因: 启动ubuntu 的时候,磁盘空间不够了. 解决方法: 启动Ubuntu 的时候,选择Advanced options for Ubuntu 然后选择recovery 之后选择clean 清理 ...

  9. android学习七 菜单

    1.菜单分类 常规菜单 子菜单 上下文菜单 图标菜单 辅助菜单 交替菜单 2.菜单类 andriod.view.menu   3.菜单的参数     名称:字符串标题     菜单ID:整数     ...

  10. [JSON].remove( keyPath )

    语法:[JSON].remove( keyPath ) 返回:无 说明:移除指定路径的键 示例: Set jsonObj = toJson("{div:{'#text-1': 'is tex ...