必看参考：

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. Keil : Contents missmatch at:08000E84H Verify Failed!

    Keil 下载时出以下错误: Device: STM32F103VB VTarget = 3.300V State of Pins: TCK: 0, TDI: 0, TDO: 1, TMS: 0, T ...

  2. .net MVC全局定时器执行作业

    首先的一个需求是在OA系统中定时跑一些定时作业,例如发放年假等事务,之前的做法是在服务器上加入一个服务,用系统定时作业去跑服务,这样有个问题就是当系统在发布的过程中,有可能忘记启动服务而导致无法定时执 ...

  3. SpringMVC（一）

    开始学习SpringMVC了,就写下每次学习的内容,以及自己的理解.方便以后回顾知道自己哪里好哪里不好~~~ 一.目录 1.主目录如此: 2.target目录 二.文件 1.主要用到的几个文件夹(如主 ...

  4. Android 命名规范和编码规范

    简明概要  多写注释 一.关于命名规范 对于开发项目来说肯定是要有统一的规范,然而命名规范需要做到哪几点呢? 答: 首先,不能反人类. 再来就是,要望文而知其意. 下面就来说说具体该怎么去规范我们的代 ...

  5. jeewx的使用_01 接入和验证

    jeewx是java语言的用于开发微信公共平台的一个框架,有人说很臃肿,但个人感觉还不错,仁者见仁智者见智吧, 下面简单介绍工作原理: 1.下载 要使用jeewx需要先下载其源码 jeewx介绍:ht ...

  6. Myeclipse:No projects are available for deployment to this server!

    这是因为以前的项目不是用myEclipse创建的,所以用myeclipse deploy的时候找不到你的项目. 可以这样做:右击原项目名 - myeclipse - Add myeclipse  We ...

  7. 日志文件C++ 时间 文件 行数

    #include <stdio.h> #include<windows.h> #include <time.h> #define Line __LINE__ #de ...

  8. Swipe2.1更新——移动Web内容滑块

    Swipe JS 是一个轻量级(3.7 kb) mobile slider,支持 1:1 触摸移动(基于精确的触摸位置的内容滑动). 但是我使用一段时间后发现两个bug,所以在官方2.0(官网http ...

  9. #pragma warning 启用和禁用warning

    开发人员可以使用 #pragma 指令将警告作为错误处理:还可以启用或禁用警告,如下面的示例所示: 1.将一个warning作为一个错误 #pragma warning (error: 6260) 2 ...

  10. curl常用的5个例子(转)

    我用php ,curl主要是抓取数据,当然我们可以用其他的方法来抓取,比如fsockopen,file_get_contents等.但是只能抓那些能直接访问的页面,如果要抓取有页面访问控制的页面,或者 ...