必看参考：

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. 软交换和IMS是什么关系

    软交换是一种功能实体,为下一代网络NGN提供具有实时性要求的业务的呼叫控制和连接控制功能,是下一代网络呼叫与控制的核心. 简单地看,软交换是实现传统程控交换机的"呼叫控制"功能的实 ...

  2. 【STL学习】智能指针之shared_ptr

    前面已经学习过auto_ptr,这里补充另外一种智能指针,比auto_ptr要更强力更通用的shared_ptr. shared_ptr 简介及使用选择  几乎所有的程序都需要某种形式的引用计数智能指 ...

  3. 如何在64位系统上安装SQL Server 2000

    如何在64位系统上安装SQL Server 2000? 现在用SQL Server 2000数据库的人少了吧?大都是SQL Server 2005/2008了.不过还是有需求的,今天一朋友就让我在他的 ...

  4. mybatis 打印sql log配置

    mybatis 打印sql log, 方便调试.如何配置呢? log4j.xml : <!-- 打印sql start --> <appender name="IBatis ...

  5. 取消jQuery validate验证

    有时候当我们在编辑页面点保存后加上了validate错误验证后又想用表单提交的方式返回界面没有清除验证就返回不了 加上这句话就清除验证了      注意:remove()是删除了相关标签  我这需求是 ...

  6. linux设置tomcat开机自动启动

    1.修改/etc/rc.d/rc.local,使用vi /etc/rc.d/rc.local 命令2.在/etc/rc.d/rc.local文件最后添加下面两行脚本 export JAVA_HOME= ...

  7. Eclipse 开发WEB项目所遇问题 WebContent WebRoot

    原文:http://blog.sina.com.cn/s/blog_525960510100jo0j.html 最近在做Web 项目时,新建了一个WEB 项目,如webdemo,eclipse默认的b ...

  8. PROC简单的用例－－VC连接ORACLE

    操作系统:windows 7 数据库版本号:oracle 10g VS版本号:VS2010 前言:连接ORACLE有许多方法,这里只PROC外壳,说明如何连接oracle,有事吗,希望你告诉我指出,一 ...

  9. QQ强制视频聊天

    QQ强制视频聊天 http://ike.126.com   现在,使用QQ的用户已经非常多,QQ聊天已经成了大家的家常便饭,除了跟自己和朋友和同事等熟悉的人聊天外,跟陌生的网友聊天也占了相当大的比例, ...

  10. python内存管理

    python对象三要素: identity(值):对应于内存的地址,不可修改 type(类型):不可修改 value(值): mutable :可以修改 immutable:不可以修改 引用计数 当引 ...