必看参考：

http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html

代码：

 <!DOCTYPE html>

 <html>

 <head>

    <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title>

    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

 </head>

 <body>

 <div id="myCarousel" class="carousel slide">

    <!-- 轮播（Carousel）指标 -->

    <ol class="carousel-indicators">

       <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

       <li data-target="#myCarousel" data-slide-to="1"></li>

       <li data-target="#myCarousel" data-slide-to="2"></li>

    </ol>

    <!-- 轮播（Carousel）项目 -->

    <div class="carousel-inner">

       <div class="item active">

          <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">

       </div>

       <div class="item">

          <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">

       </div>

       <div class="item">

          <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">

       </div>

    </div>

    <!-- 轮播（Carousel）导航 -->

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

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

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

   </a>

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

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

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

   </a>

 </div> 

 </body>

 </html>

效果：

【html】【12】特效篇--轮播图的更多相关文章

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

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

  2. 【html】【20】高级篇--轮播图[聚焦]

    下载: http://sc.chinaz.com/jiaoben/151204445580.htm 效果: html <!doctype html> <html> <he ...

  3. 【jQuery】百分比自适应屏幕轮播图特效

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

  4. Android自定义控件之轮播图控件

    背景 最近要做一个轮播图的效果,网上看了几篇文章,基本上都能找到实现,效果还挺不错,但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码.于是自己封装了一下.本篇轮播图实现原理原文出处: ...

  5. 浅谈轮播图（原生JavaScript实现）

    现在各种轮播图插件,玲琅满目,用起来也非常方便,通常只需要选择元素然后传入参数就可以了.但是,和授人以鱼不如授人以渔一样的道理,不管怎样最基本的轮播图原理还是应当掌握的.这样不仅有利于我们自己写出来满 ...

  6. 2、原生js实现轮播图特效

    很多很多网站经常会用到一个特效,那就是轮播图,对于日新月异的前端技术来说其实就是一个框架一个接口的事,但轮播的原理是什么?用最原始的javascript来写又是怎样的呢?本人是一枚菜鸟,这篇文章就当做 ...

  7. jquery特效（5）—轮播图③（鼠标悬浮停止轮播）

    今天很无聊,就接着写轮播图了,需要说明一下,这次的轮播图是在上次随笔中jquery特效(3)—轮播图①(手动点击轮播)和jquery特效(4)—轮播图②(定时自动轮播)的基础上写出来的,也就是本次随笔 ...

  8. jquery特效（4）—轮播图②（定时自动轮播）

    周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...

  9. 【JavaScript】固定布局轮播图特效

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

随机推荐

  1. 射频识别技术漫谈(6)——通讯协议概述【worldsing笔记】

    通讯协议是通讯的双方或多方在交流时遵守的规矩,包括谁先发起通讯,先交流什么,后交流什么,一方如何问,另一方如何答等.在这里通迅的双方指的是读写器和卡片. 首先是谁先发起通讯,很显然有两种,读写器先发言 ...

  2. 依賴注入入門——Unity（一）

    參考資料http://blog.csdn.net/m13666368773/article/details/7802126 背景介紹 在设计模式中,尤其是结构型模式很多时候解决的就是对象间的依赖关系, ...

  3. AdapterView及其子类之二：使用ListActivity及ArrayAdapter创建列表

    见归档项目ListActivityDemo.zip. 基本步骤如下: 1.创建一个TextView,用于指定每一个ListView的格式 <?xml version="1.0" ...

  4. Visual Studio 2012 应用软件开发新方式

    微软正式发布Visual Studio 2012 应用软件开发新方式 2012-09-13 09:54 51CTO.com 我要评论(0) 字号:T | T “现在,开发者将有更好的机会开发与云服务连 ...

  5. Android设计模式系列--原型模式

    CV一族,应该很容易理解原型模式的原理,复制,粘贴完后看具体情况是否修改,其实这就是原型模式.从java的角度看,一般使用原型模式有个明显的特点,就是实现cloneable的clone()方法.原型模 ...

  6. btrace拓展工具-java应用性能诊断优化利器

    Btrace是一个实时监控工具,可以无需修改应用代码(事实上它修改了字节码),来达到不可告人的秘密!这是性能调优和诊断的利器! 它可以获取应用程序代码的执行时间,他可以让你无需修改代码,帮你做时间的打 ...

  7. 【转】安装Ubuntu 15.10后要做的事

    Ubuntu 15.10发布了,带来了很多新特性,同样也依然带着很多不习惯的东西,所以装完系统后还要进行一系列的优化. 1.删除libreoffice libreoffice虽然是开源的,但是Java ...

  8. iOS 改变tableview cell的背景色

    cell.selectedBackgroundView = [[UIView alloc] initWithFrame:cell.frame]; cell.selectedBackgroundView ...

  9. C#-datagridview隐藏行头

    在进行datagridview的设置的过程中,常常会遇到需要设定datagridview1的行头显示,这就需要用到datagridview的属性: RowHeadersVisible属性设置为fals ...

  10. 文件I/O之ioctl函数

    ioctl函数是I/O操作的杂物箱.不能用其他函数表示的I/O操作通常都能用ioctl表示.终端I/O是ioctl的最大使用方面. ioctl函数通过对文件描述符发送特定的命令来控制文件描述符所代表的 ...