<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. 轻松学Linux之使用转义字符

         转义字符是C语言中表示字符的一种特殊形式.通常使用转义字符表示ASCII码字符集中不可打印的控制字符和特定功能的字符,如用于表示字符常量的单撇号( '),在Unix操作系统中有一类特殊的字符 ...

  2. linux rar工具

    rar系统工具: wget http://www.rarlab.com/rar/rarlinux-3.8.0.tar.gz tar -zxvf rarlinux-3.8.0.tar.gz cd rar ...

  3. Fedora 16设置开机自启动程序与Ubuntu的区别

    Ubuntu设置开机自启动脚本的方法是:修改/etc/init.d/rc.local这个文件,添加需要启动的程序即可,相关函数如下: void SetSysAutoBoot() { ] = {}; ; ...

  4. POJ 3347 Kadj Squares

    Kadj Squares Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 2132   Accepted: 843 Descr ...

  5. Java沙箱技术

    自从Java技术出现以来,有关Java平台的安全性及由Java技术发展所引发的新的安全性问题,引起了越来越多的关注.目前,Java已经大量应用在各个领域,研究Java的安全 性对于更好地使用Java具 ...

  6. VPN 隧道协议PPTP、L2TP、IPSec和SSLVPN的区别

    最近软矿频繁地介绍了各种VPN,有免费的PacketiX.NET和Hotspot Shield,有付费的Astrill VPN,iVPN和PureVPN.在介绍这些VPN的时候,常常会说到PPTP.L ...

  7. 代码SketchPaintCode绘制

    作者:codeGlider 在我的上一篇文章中 swift10分钟实现炫酷的导航控制器跳转动画,有一个swift logo的形状 上一篇文章的动画 我说的就是中间用来做遮罩的形状. 它不是图片是用一段 ...

  8. php中定义类

    <?php class Person{ //定义了一个Person类 public $name; //定义属性name public $age; //定义属性age function __con ...

  9. js 浮点小数计算精度问题 parseFloat 精度问题

    在js中进行以元为单位进行金额计算时 使用parseFloat会产生精度问题 var price = 10.99; var quantity = 7; var needPay = parseFloat ...

  10. VS2010 远程调试

    1.在客户端电脑建一个账户,账户名和密码和调试端的账户密码一样 2.在客户端电脑进入 管理工具-本地安全策略-本地策略-安全选项 网络访问:本地账户的共享和安全模式”,改为“经典-本地用户以自己的身份 ...