功能:轮播插件carousel, 主要用于首页大图片的显示与左右按钮的点击滑动图片

插件:carouse.js

要点:class="carousel slide"里的data-slide-to的数目与carouse-inner的div的数目一致

  <script src="../extlib/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../extlib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
<script src="../extlib/bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8" ></script>
<script src="../extlib/bootstrap-3.3.5-dist/js/tooltip.js" type="text/javascript" charset="utf-8" ></script>
<script src="../extlib/bootstrap-3.3.5-dist/js/carousel.js" type="text/javascript" charset="utf-8" ></script> <!-- bs3-carousel 即可解决 -->
<div id="carousel-id" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-id" data-slide-to="0" class=""></li>
<li data-target="#carousel-id" data-slide-to="1" class=""></li>
<li data-target="#carousel-id" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide" alt="First slide" src="data:images/banner-201308221138340.jpg" height="409" width="1000">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide" src="data:images/banner-201308191512580.jpg" height="409" width="1000">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<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>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item active">
<img data-src="holder.js/900x500/auto/#555:#5a5a5a/text:Third slide" alt="Third slide" src="data:images/banner-201308191607480.jpg" height="409" width="1000">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<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>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

效果图:

bootstrap-carousel的更多相关文章

  1. bootstrap插件学习-bootstrap.carousel.js

    先看bootstrap.carousel.js的结构 var Carousel = function (element, options){} //构造器 Carousel.prototype = { ...

  2. Bootstrap carousel轮转图的使用

    来自:慕课网http://www.imooc.com/code/5395 图片轮播效果在Web中常常能看到,很多人也称之为幻灯片.其主要显示的效果就是多幅图片轮回播放, 从右向左播放,鼠标悬停在图片时 ...

  3. 实现Bootstrap Carousel Fade Transition 淡入淡出效果

    html代码: <div id="carousel" class="carousel slide carousel-fade" data-ride=&qu ...

  4. 40 个超棒的免费 Bootstrap HTML5 网站模板

    Bootstrap 是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 目前 ...

  5. CSS_Bootstrap

    ①BS学习的基础 第一个例子 <!DOCTYPE html> <html lang="en"> <head> <title>Boot ...

  6. Gruntfile.js模板

    module.exports = function(grunt) { // 配置项 var AppConfig = { name: 'app', //源文件目录 src: 'app/src', //生 ...

  7. 前端自动化gulp遇上es6从 无知到深爱

    Gulp是什么? Gulp是前端自动化的工具,但Gulp能用来做什么 1.搭建web服务器 2.使用预处理器Sass,Less 3.压缩优化,可以压缩JS CSS Html 图片 4.自动将更新变化的 ...

  8. Django项目:CRM(客户关系管理系统)--81--71PerfectCRM实现CRM项目首页

    {#portal.html#} {## ————————46PerfectCRM实现登陆后页面才能访问————————#} {#{% extends 'king_admin/table_index.h ...

  9. Django项目:CRM(客户关系管理系统)--57--47PerfectCRM实现CRM客户报名流程02

    图片另存为  16*16  名字修改为      bpm_logo.jpg /*! *bootstrap.js * * Bootstrap v3.3.7 (http://getbootstrap.co ...

  10. Django项目:CRM(客户关系管理系统)--47--38PerfectCRM实现全局账号登录注销02

    图片另存为  16*16  名字修改为      global_logo.jpg /*! *bootstrap.js * * Bootstrap v3.3.7 (http://getbootstrap ...

随机推荐

  1. Beta版本冲刺第三天 12.9

    一.站立式会议照片: 二.项目燃尽图: Android端 后台 三.项目进展: 成 员 上次完成任务 今天完成任务 明天要做任务 问题困难 心得体会 胡泽善 完成用户简历的填写和查看 日期合理性的判断 ...

  2. 安卓开发30:AsyncTask的用法

    http://blog.csdn.net/initphp/article/details/10392093 安卓开发笔记系列(43)  在开发Android应用时必须遵守单线程模型的原则: Andro ...

  3. Android系统手机端抓包方法

    抓包准备 1. Android手机需要先获得root权限.一种是否获得root权限的检验方法:安装并打开终端模拟器(可通过安卓市场等渠道获得).在终端模拟器界面输入su并回车,若报错则说明未root, ...

  4. angular评论星级指令

    地址: https://github.com/happen-zh/myStar 支持最大数,是否必填,回调,是否只读

  5. audio patch(10.9.3) [2.6.1]

    ; Basic Block Input Regs: rax -  Killed Regs: <nothing>0000000000048353 3D8419D411             ...

  6. restClient访问SSL

    IRestClient client = new RestClient("https://xxx.com/aa/bb"); "; ); ServicePointManag ...

  7. 10月21日下午PHP常用函数

    函数四要素:返回类型  函数名  参数列表  函数体 //最简单的函数定义方式 function Show() { echo "hello"; } Show();//输出结果为he ...

  8. JSON-LD

    RDF RDF用于信息需要被应用程序处理而不是仅仅显示给人观看的场合.RDF提供了一种用于表达这一信息.并使其能在应用程序间交换而不丧失语义的通用框架.既然是通用框架,应用程序设计者可以利用现成的通用 ...

  9. MinGW: TOO MANY SECTIONS issue

    http://sourceforge.net/p/mingw-w64/mailman/mingw-w64-public/thread/509A38C6.6070807@doxos.eu/ MingGW ...

  10. JS中两个重要的方法 call & apply 学习

    正题: Function.prototype.apply(instance,args)  //args 数组 Function.prototype.Call(instance,a1,a2)  //a1 ...