<!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. mysql库地址

    https://dev.mysql.com/downloads/connector/

  2. WinSCP与Putty远程连接linux

    1.  有时putty连接不上,可能是linux机器上的telnet服务未开,把蓝线上的√去掉. 2. ctrl + p 打开putty窗口: 3. putty如果显示乱码,右键 putty窗口,选择 ...

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

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

  4. 上海Uber优步司机奖励政策（1月11日~1月17日）

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

  5. C#函数库

    //读取文本文件并返回内容不同的那一行         public static String different(String sOldFile, String sNewFile)         ...

  6. 使用keytool工具产生带根CA和二级CA的用户证书

    使用keytool工具产生带根CA和二级CA的用户证书 1 生成根CA 1.1 生成根CA证书   根CA实际是一张自签CA,自签CA的使用者和颁发者都是它自己.使用下面的命令生成根证书,如果没有指定 ...

  7. Windows系统常用修复命令 无须重装系统

    1.0 netsh int ipv4 reset 2.0 netsh winsock reset winsock是Windows网络编程接口,winsock工作在应用层,它提供与底层传输协议无关的高层 ...

  8. hdu2899Strange fuction(解方程+二分)

    Strange fuction Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  9. MySQL☞in语句

    in语句: 1)列名 in(数值1,数值2,数值3…):求出满足该列的多个列值 格式: select 列名1,列名2  from 表名 where 列名 in (数值1,数值2,数值3...) 如下图 ...

  10. 157. Unique Characters 【LintCode by java】

    Description Implement an algorithm to determine if a string has all unique characters. Example Given ...