参考 http://wrongwaycn.github.io/bootstrap/docs/javascript.html#collapse

同样 启动方式有2种 一种是在div的class中加  另一种是js启动

js可以提供更多控制  假如你只是需要例子中得效果 就用第一种data-attribute 的方式吧

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8" />

  <link href="../css/bootstrap.css" rel="stylesheet">

  <style type="text/css">

  </style>

</head>

<body>

  <div id="myCarousel" class="carousel slide" style="width:600px;">

    <ol class="carousel-indicators">

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

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

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

    </ol>

    <div class="carousel-inner">

      <div class="item">

        <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">

        <div class="carousel-caption">

          <h4>First Thumbnail label</h4>

          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

        </div>

      </div>

      <div class="item active">

        <img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">

        <div class="carousel-caption">

          <h4>Second Thumbnail label</h4>

          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

        </div>

      </div>

      <div class="item">

        <img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">

        <div class="carousel-caption">

          <h4>Third Thumbnail label</h4>

          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

        </div>

      </div>

    </div>

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

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

  </div>

  <script src="../js/jquery-1.8.0.min.js" type="text/javascript"></script>

  <script src="../js/bootstrap.js" type="text/javascript"></script>

</body>

</html>

js方式

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8" />

  <link href="../css/bootstrap.css" rel="stylesheet">

  <style type="text/css">

  </style>

</head>

<body>

  <div id="myCarousel" class="carousel slide" style="width:600px;">

    <!-- Carousel items -->

    <div class="carousel-inner">

      <div class="item">

        <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">

        <div class="carousel-caption">

          <h4>First Thumbnail label</h4>

          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

        </div>

      </div>

      <div class="item active">

        <img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">

        <div class="carousel-caption">

          <h4>Second Thumbnail label</h4>

          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

        </div>

      </div>

      <div class="item">

        <img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">

        <div class="carousel-caption">

          <h4>Third Thumbnail label</h4>

          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

        </div>

      </div>

      <div class="item">

        <img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">

        <div class="carousel-caption">

          <h4>Fourth Thumbnail label</h4>

          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

        </div>

      </div>

    </div>  <!-- Carousel nav -->

    <a id="PreBtn" class="carousel-control left" >&lsaquo;</a>

    <a id="NxtBtn" class="carousel-control right" >&rsaquo;</a>

  </div>

</div>

<div class="div1 btn" value="0">1</div>

<div class="div2 btn" value="1">2</div>

<div class="div3 btn" value="2">3</div>

<div class="div4 btn" value="3">4</div>

<script src="../js/jquery-1.8.0.min.js" type="text/javascript"></script>

<script src="../js/bootstrap.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

  $('.carousel').carousel({

    interval: 5000

  });

  $('carousel').carousel('cycle');

  $('#PreBtn').click(function(){

    $('.carousel').carousel('prev');

  });

  $('#NxtBtn').click(function(){

    $('.carousel').carousel('next');

  });

  $('.btn').click(function(){

    var val=$(this).attr('value');

    //alert(val);

    $('.carousel').carousel(Number(val));

  });

});

</script>

</body>

</html>

BootStrap 轮播 Carousel的更多相关文章

  1. Bootstrap 轮播(Carousel)插件

    轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是非常灵活的.可是图像,内嵌框架,视频或者其它您想的放置任何内容的类型. 下面是一个简单的幻灯片,使用轮播(carousel)插件显示 ...

  2. Bootstrap 轮播（Carousel）插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...

  3. Bootstrap 轮播（Carousel）详解

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容.如果您想要单独引用 ...

  4. Bootstrap历练实例：轮播(carousel)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. Bootstrap 历练实例-轮播(carousel)插件的事件

    事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...

  6. Bootstrap 历练实例-轮播(carousel)插件方法

    方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...

  7. bootstrap轮播图--兼容IE7

    <!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...

  8. bootstrap轮播组件之“如何关闭自动轮播”

    在一个页面里使用多个bootstrap轮播组件的时候,如果还让所有轮播图都自动轮播的话,整个画面都在动,会给用户一种很不好的体验感受.所以,需要关闭轮播图的自动轮播. 关闭方法:去除如下属性即可: d ...

  9. bootstrap轮播图 两侧半透明阴影

    用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. ...

随机推荐

  1. 不要再坑人啦！NSOperation才是苹果推荐使用的多线程技术！

    首先声明一下.小汤我在实际开发中呢,实际上也是喜欢用GCD多一点,由于用起来感觉更方便. 可是,事实是什么呢? 苹果推荐使用的实际上是NSOperation.所以希望对此没有研究的各位不要再在博客中误 ...

  2. JavaScript之apply()和call()的区别

    我 在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示 例,总算是看的有点眉目了,在这里我做如下笔记,希望和 ...

  3. Html5 自定义数据属性

    html5 可以为元素添加自定义属性,但是要添加前缀data-.(下面这个例子中的自定义属性的命名,其实是不规范的,不应该包含大写字符,例如:data-myName 应改命名为:data-myname ...

  4. Java日期计算之Joda-Time

    http://rensanning.iteye.com/blog/1546652 Joda-Time提供了一组Java类包用于处理包括ISO8601标准在内的date和time.可以利用它把JDK D ...

  5. Chain of Responsibility模式

    熟悉VC/MFC的都知道,VC是“基于消息,事件驱动”,消息在VC开发中起着举足轻重的作用.MFC提供了消息的处理的链式处理策略,处理消息的请求将沿着预定好的路径依次进行处理.消息的发送者并不知道该消 ...

  6. Struts2知识总结

    整篇参考:http://blog.csdn.net/zq9017197/article/details/5958627 要搞清楚以下几点: 1.Struts2是什么?它的运行原理是什么? 2.Stru ...

  7. LINUX诞生

    编辑 Linux[1]  是一类Unix计算机操作系统的统称.Linux操作系统也是自由软件和开放源代码发展中最著名的例子.在1991 年的十月,由一个名为 Linus Torvalds的年轻芬兰大学 ...

  8. 阿里云ECS每天一件事D6：安装nginx-1.6.2

    自从接触nginx就开始喜欢上这个小东西了,似乎没什么特别的原因,就是喜欢而已. 1.安装环境的准备 yum install pcre pcre-devel openssl openssl-devel ...

  9. win7使用的一些误区以及困惑

    总结了一些新人在使用win7时容易产生的误区和困惑,罗列出来说明一下,以便新人能尽快适应新的操作系统. 1.内存使用的问题:这是个大误区,很多人都用xp时代的眼光来审视win7,这是错误的,因为两者的 ...

  10. 【Delphi内联汇编学习1】Delphi与汇编

    我一直认为Delphi功能与C++相比毫不逊色,提供了丰富的控件和类.全部API以及嵌入的汇编.最近小弟在把C版的Huffman压缩改用Delphi写时,顺便“研究”了一下Delphi的位操作和嵌入式 ...