参考 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. 利用Telnet来模拟Http请求 有GET和POST两种

    利用Telnet来模拟Http请求---访问百度.       1.打开"运行"->cmd进入命令环境:       2.输入"telnet www.baidu.c ...

  2. 列表的实现-----数据结构与算法JavaScript描述 第三章

    实现一个列表 script var booklist = new List(); booklist.append('jsbook'); booklist.append('cssbook'); book ...

  3. 想买一套arduino玩玩

    对于物联网,去年才接触,认识但不熟悉.做过一个项目,买了一块树莓派,看了一段网络电视. 最近被邀分享一些关于物联网的东西,翻了些大学公开课,很系统但太偏理论和框架.听了一个TED感觉很不错,但太精简. ...

  4. 如何在oracle中导入导出(备份&恢复)dmp数据库文件

    Oracle数据导入导出imp/exp就相当于oracle数据还原与备份.exp命令可以把数据从远程数据库服务器导出到本地的dmp文件,imp命令可以把dmp文件从本地导入到远处的数据库服务器中. 利 ...

  5. 转 --maven系列之一 简介

    http://blog.csdn.net/jiuqiyuliang/article/details/41076215 [项目管理和构建]——Maven简介(一) 2015-01-31 21:27 68 ...

  6. BZOJ 4000: [TJOI2015]棋盘( 状压dp + 矩阵快速幂 )

    状压dp, 然后转移都是一样的, 矩阵乘法+快速幂就行啦. O(logN*2^(3m)) ------------------------------------------------------- ...

  7. 去掉xcode编译warning:ld: warning: directory not found for option '

    tyle="margin:20px 0px 0px; font-size:14px; line-height:26px; font-family:Arial; text-align:left ...

  8. 关于Python网络爬虫实战笔记①

    python网络爬虫项目实战笔记①如何下载韩寒的博客文章 python网络爬虫项目实战笔记①如何下载韩寒的博客文章 1. 打开韩寒博客列表页面 http://blog.sina.com.cn/s/ar ...

  9. springmvc的ModelAndView的简单使用

    参考:http://blog.csdn.net/zzjjiandan/article/details/34089313 先上图: MAVTest.java package com.wyl; impor ...

  10. vc6.0批量编译

    一直想研究一下怎么让电脑批处理编译程序,今天就从vc6开始,做个记录,学习一下. VC可以生成make文件(Project->Export Makefile),在设置好环境变量下,执行NMAKE ...