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: ...
随机推荐
- ListCell Animation in ListView
After a long time I am back again with new stuffs. I have seen that JavaFX has got so many demand no ...
- C#应用Newtonsoft.Json操作json[2]-反序列化不定类型
在读json时,有时不知道对方的数据类型是什么样的,本文用Newtonsoft,把json反序列化为List>,在某种情况下还是有用的. private static List<Dicti ...
- visualC/C++连接MySql数据库
vs连接数据库其实就是将mysql数据库.h头文件接口.lib链接文件和dll执行文件加入到项目中.下面是配置如何加入. 转于http://www.cnblogs.com/justinzhang/ar ...
- c# 调用zebra打印指令 打印到USB端口
c# 调用zebra打印机指令打印条码,如果直接打印到lpt1端口的打印机,通过copy指令没有问题, 但如果ZEBRA打印机是通过USB连接,打印机端口为usb001,则程序不能直接拷贝到usb00 ...
- HDU 5884 Sort (二分)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5884 nn个有序序列的归并排序.每次可以选择不超过kk个序列进行合并,合并代价为这些序列的长度和.总的 ...
- Android PHP 通过JSON进行数据交互
一.首先是Android客户端解析PHP返回的JSON数据 1.PHP代码(这里用到了数据库,如果没有准备数据库的话,可以自定义字符串) <?php $link=mysql_connect(SA ...
- 浅谈iOS IPv6-only 新规
5月份苹果发布新规,对于开发人员只需要做到以下几点就能顺利上线啦! 1.苹果从6月1日起,提供App Store审核的应用必须要兼容面向硬件识别和网络路由的最新互联网协议--IPv6-only标准.也 ...
- JSP文件下载时文件名在ie和firefox下面文件名不一致极其超链接中文乱码的问题的改进
response.setContentType("application/octet-stream;charset=UTF-8"); fileName=java.net.URLEn ...
- 结构类模式(二):桥接(Bridge)
定义 将抽象化(Abstraction)与实现化(Implementation)脱耦,使得二者可以独立地变化. 在软件系统中,某些类型由于自身的逻辑,它具有两个或多个维度的变化,那么如何应对这种“多维 ...
- 为了支持AOP的编程模式,我为.NET Core写了一个轻量级的Interception框架[开源]
ASP.NET Core具有一个以ServiceCollection和ServiceProvider为核心的依赖注入框架,虽然这只是一个很轻量级的框架,但是在大部分情况下能够满足我们的需要.不过我觉得 ...