<div id="carousel1" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/940x360/&text=Picture-1"/>
<div class="carousel-caption">
<h1 style="color:#CCC">标题1</h1><!--文字显示在图片上面&半透明黑色-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div> <div class="item">
<img src="http://placehold.it/940x360/&text=Picture-2"/>
<div class="carousel-caption">
<h1 style="color:#CCC">标题2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation .</p>
</div>
</div> <div class="item">
<img src="http://placehold.it/940x360/&text=Picture-3"/>
<div class="carousel-caption">
<h1 style="color:#CCC">标题3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, .</p>
</div>
</div> <div class="item">
<img src="http://placehold.it/940x360/&text=Picture-4"/>
<div class="carousel-caption">
<h1 style="color:#CCC">标题4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
</div>
</div>
</div>
<a href="#carousel1" data-slide="prev" class="left carousel-control"><</a>
<a href="#carousel1" data-slide="next" class="right carousel-control">></a>
</div>

BootStrap2学习日记23---图片轮播的更多相关文章

  1. Android学习笔记之图片轮播...

    PS:一个bug又折腾了一个下午....哎... 学习内容: 1.Android利用ViewPager和PagerAdapter实现图片轮播... 2.使用反射机制获取Android的资源信息... ...

  2. ios 学习 广告图片轮播器

    // // ViewController.m // 图片轮播器 // // Created by zjj on 15/5/23. // Copyright (c) 2015年 zjj. All rig ...

  3. html学习之路--简单图片轮播

    一个简单的图片轮播效果 photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg.2.jpg.3.jpg.4.jpg. <!DOCTYPE html& ...

  4. Vue学习—Vue写一个图片轮播组件

    1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...

  5. JavaScript学习---简易图片轮播

    效果如下: 图片定时轮播 点击左右控制显示下一张或上一张图片 index.html文件 <html> <head> <title> js编写实现幻灯片效果 < ...

  6. 全面解析Bootstrap图片轮播效果

    http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...

  7. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  8. Android零基础入门第49节:AdapterViewFlipper图片轮播

    原文:Android零基础入门第49节:AdapterViewFlipper图片轮播 上一期学习了ExpandableListView的使用,你已经掌握了吗?本期开始学习AdapterViewFilp ...

  9. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

随机推荐

  1. C 基于socket实现简单的文件传输

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAicAAAA5CAIAAABicRxIAAAgAElEQVR4nOy9Z5NVV5om+rzL773POW

  2. 第二百一十一天 how can i 坚持

    参与感.做项目要有激情. 睡觉.

  3. install python module

    [install python module] 参考:http://docs.python.org/2.7/install/index.html

  4. win7 文件共享 xp

    前几天因为需要将win7内一文件夹共享给XP使用,因为NT5跟NT6安全机制的问题,共享的实现没有XP共享的方便,很多人是牺牲(关闭)了win7的系统防火墙才达到共享给XP的目的,但是关闭防火墙势必会 ...

  5. FZU 8月有奖月赛A Daxia & Wzc's problem (Lucas)

    Problem A Daxia & Wzc's problem Accept: 42    Submit: 228Time Limit: 1000 mSec    Memory Limit : ...

  6. 汇编语言程序入门实验一:在dos下对用户输入作出应答

    汇编语言程序入门实验一:在dos下对用户输入作出应答 1,背景 成功预言了今天要上计算机操作系统上机实验课,昨天预习后,今天的两个上机实验做得很成功.但是也有一些问题.问题1:学校的系统目前是wind ...

  7. CF 86D Powerful array 【分块算法,n*sqrt(n)】

    给定一个数列:A1, A2,……,An,定义Ks为区间(l,r)中s出现的次数. t个查询,每个查询l,r,对区间内所有a[i],求sigma(K^2*a[i]) 离线+分块 将n个数分成sqrt(n ...

  8. EasyMock使用说明

    来自官网的使用说明,原文见http://www.easymock.org/EasyMock2_0_Documentation.html 1.1. 准备 大多数的软件系统都不是单独运行的,它们都需要于其 ...

  9. 让AllocateHwnd接受一般函数地址作参数

    http://www.xuebuyuan.com/1889769.html Classes单元的AllocateHWnd函数是需要传入一个处理消息的类的方法的作为参数的,原型: function Al ...

  10. maven的学习系列(四)—创建maven项目注意事项

    文件夹: <1> 中央工厂的位置 <2>mvn archetype:generate <3>Eclipse配置maven <4>在Eclipse中创建简 ...