必看参考：

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. box-flex 分割

    <!DOCTYPE html> <html> <head> <style> .box{ width: 300px; height: 100px; bac ...

  2. 【Stage3D学习笔记续】真正的3D世界（二）：显示模型

    虽然我们进入真3D世界了,但是上一章的Demo仍然是显示的一个平面,尽管我们的平面在3D空间中旋转可以看出一点3D透视的效果,但是既然是真3D,就要拿出点3D的样子来! 如果要显示3D模型,我们就要告 ...

  3. VB操作Excel

    在工程中添加引用:Microsoft Office 9.0 Object Library                    Microsoft Excel 9.0 Object Library   ...

  4. Linux使用netstat命令查看并发连接数[转]

    转自:http://www.cnblogs.com/wayne173/p/5652043.html Linux使用netstat命令查看并发连接数   我们的网站部署在linux的服务器上,特别是we ...

  5. Triangles

    1010: Triangles Time Limit: 2 Sec   Memory Limit: 128 MB Submit: 18   Solved: 8 Description You are ...

  6. python 闭包(closure)

    闭包的定义: 闭包就是一个函数,这个函数可以记住封闭作用域里的值,而不管封闭作用域是否还在内存中. 来一个例子: def happy_add(a): print 'id(a): %x' % id(a) ...

  7. HDU 5501 The Highest Mark 背包dp

    The Highest Mark Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?p ...

  8. Codeforces Round #321 (Div. 2) E. Kefa and Watch 线段树hash

    E. Kefa and Watch Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/580/prob ...

  9. [AngularJS + cryptoJS + Gravatar] Provider vs factory

    Configurable Bits Need a Provider We want to be able to configure the characterLength before Tweetab ...

  10. python爬虫之採集——360联想词W2版本号

    http://blog.csdn.net/recsysml/article/details/30541197,我的这个博文介绍了对应的简单的方法做一个联想词的爬虫,并且还承诺了下面优化: 下一版本号的 ...