BootStrap2学习日记23---图片轮播
<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---图片轮播的更多相关文章
- Android学习笔记之图片轮播...
PS:一个bug又折腾了一个下午....哎... 学习内容: 1.Android利用ViewPager和PagerAdapter实现图片轮播... 2.使用反射机制获取Android的资源信息... ...
- ios 学习 广告图片轮播器
// // ViewController.m // 图片轮播器 // // Created by zjj on 15/5/23. // Copyright (c) 2015年 zjj. All rig ...
- html学习之路--简单图片轮播
一个简单的图片轮播效果 photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg.2.jpg.3.jpg.4.jpg. <!DOCTYPE html& ...
- Vue学习—Vue写一个图片轮播组件
1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...
- JavaScript学习---简易图片轮播
效果如下: 图片定时轮播 点击左右控制显示下一张或上一张图片 index.html文件 <html> <head> <title> js编写实现幻灯片效果 < ...
- 全面解析Bootstrap图片轮播效果
http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...
- 原生js和jquery实现图片轮播特效(转)
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- Android零基础入门第49节:AdapterViewFlipper图片轮播
原文:Android零基础入门第49节:AdapterViewFlipper图片轮播 上一期学习了ExpandableListView的使用,你已经掌握了吗?本期开始学习AdapterViewFilp ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
随机推荐
- Openstack之Swift架构(Cloud Storage)
Swift是OpenStack的子项目之一,也称为对象储存,适用于储存永久类型的静态数据,例如:虚拟机镜像文件.图片.存档备份等 复制的三个副本如何联系在一起? 让我们用一些具体场景和介绍一些组件,来 ...
- SharePoint咨询师之路:备份和恢复系列三 - 备份web和服务应用程序
本系列包括: 备份服务器场和配置 备份web和服务应用程序 备份内容数据库 备份网站集 备份自定义项 备份web应用程序和服务应用程序一样有三种方式:SharePoint管理中心网站.Windows ...
- CodeForces 7C Line
ax+by+c=0可以转化为ax+by=-c: 可以用扩展欧几里德算法来求ax1+by1=gcd(a,b)来求出x1,y1 此时gcd(a,b)不一定等于-c,假设-c=gcd(a,b)*z,可得z= ...
- Javascript中的数据类型之旅
虽然Javascript是弱类型语言,但是,它也有自己的几种数据类型,分别是:Number.String.Boolean.Object.Udefined.Null.其中,Object属于复杂数据类型, ...
- 用完成例程(Completion Routine)实现的重叠I/O模型
/// 用完成例程(Completion Routine)实现的重叠I/O模型 /// 异步IO模型 /// 用完成例程来实现重叠I/O比用事件通知简单得多.在这个模型中,主线程只用不停的接受连接 / ...
- Android Studio使用JNI
0x01 前言 本文讲述使用Android Studio通过静态注册.动态注册使用JNI的方法,以及加载第三方so文件的方法 0x02 Android Studio静态注册的方式使用JNI 1. 添加 ...
- 用ILMerge.exe合并dll
F:\ILMerge>ILMerge /targetplatform:v4,"C:\WINDOWS\Microsoft.NET\Framework\v4.0.30319" / ...
- js关闭当前页面/关闭当前窗口
function CloseWebPage(){ if (navigator.userAgent.indexOf("MSIE") > 0) { if (navigator. ...
- win8 企业版 安装 .net2.0 .net 3.5
Windows 8 默认集成 .Net Framework 4.5,因此运行一些基于3.5或以前版本的程序时会弹出这个提示. 2012-3-2 15:24 上传 下载附件 (23.91 KB) 这 ...
- AJAX在Post中文的时候乱码的解决方法
加上设置字符编码的方法: response.setHeader("charset","gb2312"); *************************** ...