必看参考：

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. （原创）vagrant up 异常报错，出现 There was an error while executing `VBoxManage` 的解决方法

    最近在使用 vagrant homestead 时,不小心在虚拟机上使用了 exit 命令退出虚拟机,导致再使用 vagrant up 时出现以下错误: Bringing machine 'larav ...

  2. iOS学习之NSBundle介绍和使用

    iOS学习之NSBundle介绍和使用 http://blog.csdn.net/totogo2010/article/details/7672271 新建一个Single View Applicat ...

  3. ecshop后台admin文件夹任意更改名

    为了ecshop网站安全起见或不想泄露后台的路径,那么我们必须修改后台admin文件夹名称. 方法和步骤如下: 把原admin文件夹名改成edait为例来说明 首先,把商城根目录下的admin文件夹重 ...

  4. Java的位运算符实例——与（&）、非（~）、或（|）、异或（^）

    一.Java的位运算符实例——与(&).非(~).或(|).异或(^) 1.与(&) 0 & 2 = 0 0 0 0 0 1 0 0 1 0 2.非(~) ~0 = 7 0 0 ...

  5. DES 算法的 C++ 与 JAVA 互相加解密

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  6. Project Management - 3) Manage Your Meetings

    1. 取消没有价值的会议 会议是有代价和成本的 不要举行顺序式的多人进度报告会议 eg: 这周做了什么,下周还要做什么? 除了发言人和项目经理外,每个人都会觉得无聊. 这种会议是在拖项目的后腿,赶紧停 ...

  7. Codeforces Round #322 (Div. 2) B. Luxurious Houses 水题

    B. Luxurious Houses Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/581/pr ...

  8. WIX在VS2012中如何制作中文安装包

    WIX安装图文并茂简易说明一文中介绍了WIX安装包的制作过程,不过生成的是英文版的,如果需要制作中文版的安装包呢? 方法很简单,只需要两步. 1.增加中文UI的文件WixUI_zh-cn.wxl到工程 ...

  9. IOS debug网络PonyDebugger 实践篇

    引言:  PonyDebugger是一个很给力的iOS调试工具,它的监视器安装在Chrome浏览器下做为插件使用,通过监视器和PonyDebugger的iOS SDK相辅相成,可以很好的监视App的运 ...

  10. 第二章 使用JavaScript

    只要一提到把JavaScript放在网页中,就不得不涉及Web的核心语言-HTML.在当初开发JavaScript的时候,Netscape要解决的一个重要问题就是如何让JavaScript既能在HTM ...