<!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. 解决ssh连接中断程序终止的问题——tmux

    参考:http://www.cnblogs.com/kevingrace/p/6496899.html ssh连接有时候会异常中断,重连后原本运行的程序会中断,要解决这个问题,我们可以使用Linux终 ...

  2. Java基础之final和abstract关键字

    final final在Java中是一个保留的关键字,可以声明成员变量.方法.类以及本地变量.一旦你将引用声明作final,你将不能改变这个引用了,编译器会检查代码,如果你试图将变量再次初始化的话,编 ...

  3. 北京Uber优步司机奖励政策（2月16日）

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

  4. 老曹眼中的Linux基础

    Linux 几乎无处不在,不论是服务器构建,还是客户端开发,对操作系统的基本理解和基础技能的掌握对全栈来说都是必备的. 系统的选择 Linux发行版本大体分为两类,一类是商业公司维护的发行版本,一类是 ...

  5. LeetCode：46. Permutations（Medium）

    1. 原题链接 https://leetcode.com/problems/permutations/description/ 2. 题目要求 给定一个整型数组nums,数组中的数字互不相同,返回该数 ...

  6. CLR via c#读书笔记八：泛型

    1.定义泛型类型或方法时,为类型指定的任何变量(比如T)都称为类型参数.使用泛型类型或方法时指定的具体数据类型称为类型实参. 2.System.Collections.Concurrent命名空间提供 ...

  7. memory引擎和innodb引擎速度对比

    ysql> insert into innodb_test (name) select name from innodb_test; Query OK, rows affected ( min ...

  8. hdu1010Tempter of the Bone(迷宫dfs+剪枝)

    Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  9. uvaoj1225Digit Counting(暴力)

    Trung is bored with his mathematics homeworks. He takes a piece of chalk and starts writing a sequen ...

  10. jmeter3.0 java请求

    1.java请求说明 需要压测某些java方法或一些请求需要通过编写代码实现 1.1.依赖jar包: jmeter下/lib/ext中的ApacheJMeter_java.jar(必须).Apache ...