功能:轮播插件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. POJ 1258 Agri-Net(最小生成树 Prim+Kruskal)

    题目链接: 传送门 Agri-Net Time Limit: 1000MS     Memory Limit: 10000K Description Farmer John has been elec ...

  2. jQuery知识点总结(第一天)

    整理笔记前的题外话: 我认为互联网的高速发展其中最为主要的一点就是——开源. 开源精神,使得无数的IT爱好者贡献所学,将自己的智慧结晶无偿奉献给大家.后辈的学习者在混沌的互联网世界里,追寻着前辈们留下 ...

  3. HTML5学习总结-03 地理定位

    一 地理定位 HTML5 Geolocation(地理定位)用于定位用户的位置. 1 地理定位 地理位置 经度  :   南北极的连接线 纬度  :   东西连接的线 位置信息从何而来: IP地址 G ...

  4. SPOJ 3273

    传送门: 这是一道treap的模板题,不要问我为什么一直在写模板题 依旧只放代码 Treap 版 //SPOJ 3273 //by Cydiater //2016.8.31 #include < ...

  5. TCP/IP --- UDP Broadcast Address

    Related information link : 百度百科---->广播地址 Use restrictions: 1. You can only broadcast on the same ...

  6. Saltstack数据系统Grains和Pillar(三)

    Saltstack数据系统 分为Grains和Pillar 一.Grains 静态数据,当Minion启动的时候收集的MInion本地的相关信息.(包含操作系统版本.内核版本.CPU.内存.硬盘.设备 ...

  7. 深入JVM-常用Java虚拟机参数

    一.跟踪调试参数 1.1 跟踪垃圾回收-读懂虚拟机日志 Java的一大特色就是支持自动的垃圾回收(GC),但是有时候,如果垃圾回收频繁出现,或者占用了太长的CPU时间,就不得不引起重视.此时,就需要一 ...

  8. IOS OC 计算器算法(不考虑优先级)

    个人见解:为还在计算器算法方面迷惑的同学一个数据处理解决方案:定义一个可变数组array,一个可变字符串str,使字符通过[array addObject:str];方法添加到可变数组,每当触发运算符 ...

  9. ecshop 后台-》广告

    1.后台广告宽度限制不能超过1024,高度大于1,admin/ad_position.php 第236行 || $ad_width < ) { make_json_error($_LANG['w ...

  10. Only one statement is allowed per batch. A batch separator, such as 'GO', might be required between statements.

    When I added the file in VS I forgot to set Build Action = None from the file properties.