bootstrap的carousel图片轮播
整个轮播是放在一个div .carousel和.slide的div中的,
包括3个部分:
1. 第一个部分indicator位于下方的指示器部分. 结构是一个ol和li, ol的类是carousel-indicators,li的属性有data-target, data-slide-to, 第一个data-slide-to=0, 第一个小圆点是class=active激活的, 注意li中只有属性和类, 是没有内容 的!!
2. 第二个部分是div .carousel-inner显示的内容框. 其中包含的每一个部分都是div.item 第一个是.active激活的. (每个item包括一个image和一个div.carousel-caption>hx+p
3. 第三个部分是左右的链接control:两个 a超链接标签, a .left .carousel-control, 一个属性是data-slide="prev" 另一个是a.right .carousel-control 属性是data-slide="next". 里面包含的是一个左右方向的图标.... 当然, 两个a超链接都要设置href=#mycarousel, 注意这里不是通过 data-target属性来实现的, 是通过a的href超链接属性来实现的 #mycarousel 即前面的轮播div容器
使用js可以控制, carousel的方法和现实方式:
$('.carousel').carousel({
interval: 2000 // 注意这里不要放分号!
});
通过firefox下的控制台, 查看元素的类样式, 可以方便的修改 元素原来默认的颜色等样式, 如下图的 修改carousel默认的active indicators的颜色:
其中的活动指示点, 通过重载 来获得.
<style type="text/css">
.carousel-indicators .active{
background-color: orange;
}
bootstrap的carousel图片轮播的更多相关文章
- 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...
- 图片轮播(bootstrap)与 圆角搜索框(纯css)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 利用bootstrap写图片轮播
利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...
- 基于bootstrap的图片轮播效果展示
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...
- bootstrap 图片轮播效果
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http: ...
- 全面解析Bootstrap图片轮播效果
http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...
- bootstrap:图片轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- 基于bootstrap的图片轮播功能
插入js及css支持: <link rel="stylesheet" href="css/bootstrap.min.css"/> <scri ...
- Bootstrap历练实例:轮播(carousel)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
随机推荐
- 2018/04/21 PHP 中的Session和Cookie知识总结
在之后的工作和学习中,更是发现了自己对于基础知识的不扎实,于是又返回头来学习,确实很多东西是之前没注意或是没掌握的. 着重讲一下这几个问题 -- 什么是 Cookie ? 简单来说: 因为 HTTP ...
- getContextPath、getServletPath、getRequestURI、request.getRealPath的区别
1 区别 假定你的web application 名称为news,你在浏览器中输入请求路径: http://localhost:8080/news/main/list.jsp 1.1 System.o ...
- 基于comet服务器推送技术(web实时聊天)
http://www.cnblogs.com/zengqinglei/archive/2013/03/31/2991189.html Comet 也称反向 Ajax 或服务器端推技术.其思想很简单:将 ...
- Oracle彻底删除11gR2 GI
Oracle彻底删除11gR2 GI 环境:RHEL 6.5 + Oracle 11.2.0.4 GI 需求:在搭建Standby RAC时,安装GI软件期间由于GI安装遇到一些问题,root脚本执行 ...
- Qt元对象系统简介
在Qt中提供了c++的扩展,提供了一种元对象系统的机制,(meta-object-system)的机制.其中包含了信号与槽的内部机制,能够访问到QObject子类的元对象信息的功能. Q_OBJECT ...
- Java有序数组的实现
package 有序数组; public class OrdArray { private long[]array; private int nElems; //初始化 public OrdArray ...
- mysql服务器上的mysql这个实例中表的介绍
1.user表. 分个分隔符
- MFC CFile类读写文件详解
CFile类提供了对文件进行打开,关闭,读,写,删除,重命名以及获取文件信息等文件操作的基本功能,足以处理任意类型的文件操作. 一个读写文件的例子: 文件I/O 虽然使用CArchive类内建的序列化 ...
- Python: 正则表达式匹配反斜杠 "\"
Python正则表达式匹配反斜杠 "\" eg: >>>a='w\w\w' 'w\\w\\w' # 打印出来的 "\\" 被转义成 一个反斜 ...
- JMeter4.0二次开发之导入eclipse
1.先建立工程,命名为JMeter4.0. JDK版本为10.0.1 2.在官网下载src文件,通过文件系统导入到JMeter4.0工程中 3.在ant中选择download_jars,ant会自动下 ...