<!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. Linux 中的权限

    ABCD A-0, 十进制 B-user(u, 用户) C-group(g, 组用户) D-others(o, 其他用户) +-----+---+--------------------------+ ...

  2. MySQL高级第四章——MySQL的锁机制

    一.概述 1.定义 锁是计算机协调多个进程或线程并发访问某一资源的限制. 2.分类 操作类型来分: 读锁(共享锁)和写锁(排它锁) 数据粒度来分: 表锁和行锁 二.三锁 1.表锁——偏读 特点: 偏向 ...

  3. day 5 名片管理系统-文件版

    1.添加__name__ == '__main__' if __name__ == "__main__": #添加__name__变量 #调用主函数 main() 2.添加6功能, ...

  4. hive自定义函数——hive streaming

    Hadoop Streaming提供了一个便于进行MapReduce编程的工具包,使用它可以基于一些可执行命令.脚本语言或其他编程语言来实现Mapper和 Reducer,Streaming方式是基于 ...

  5. Python中安装Prophet

    1. 先安装pystan依赖 按照https://pystan.readthedocs.io/en/latest/windows.html说明,请使用如下命令 conda install libpyt ...

  6. QXDM及QCAT软件使用入门指南V1.0

    链接:https://pan.baidu.com/s/1i55YXnf 密码:v6nw

  7. java 前后端 日期转换

    1.前传后 @DateTimeFormat(pattern="yyyy-MM-dd") private Date payTime; 2.后传前 @JsonFormat(patter ...

  8. hdu6027Easy Summation(快速幂取模)

    Easy Summation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) ...

  9. JMeter自学笔记2-图形界面介绍

    一.写在前面的话: 上篇我们已经学会了如何安装JMeter和打开JMeter,那么这篇我们将对JMeter的图形界面做一个简单的介绍.大家只要简单的了解即可,无需死记硬背,在今后的学习和使用中慢慢熟悉 ...

  10. Cannot assign requested address (connect failed)

    压测时,应用服务器报错:Cannot assign requested address (connect failed) 经检查,由于应用服务器,频繁发起http请求,由于每次连接都在很短的时间内结束 ...