Bootstrap图片旋转轮播的实现
bootstrap初级知识旋转轮播
源文件:carousel.js、carousel.less
CSS文件:bootstrap.css
这些源文件可以从bootstrap中下载,关于轮播,有很多译法,有人叫轮播,有人叫传送带。轮播效果默认是向左轮播,大家先看一下效果图哦!
下面是源代码:
<div class="row">
<div id="mid" class="col-xs-6">
<div data-ride="carousel" class="carousel slide" id="carousel-container">
<div class="carousel-inner">
/*--这里放置轮播的图片 --*/
<div class="item"><img alt="第一张图" src="#"></img></div>
<div class="item active"><img alt="第二张图" src="#"></img></div>
<div class="item"><img alt="第三张图" src="#"></img></div>
</div>
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel-container"></li>
<li data-slide-to="1" data-target="#carousel-container"></li>
<li data-slide-to="2" data-target="#carousel-container" class="active"></li>
</ol>
<a data-slide="prev" href="#carousel-container" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" href="#carousel-container" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
属性名称 | 类型 | 默认值 | 描述 |
data-interval | number | 5000 | 幻灯片轮播的等待时间(毫秒)。如果为false,轮播将不会自动开始循环 |
data-pause | string | hover | 默认鼠标停留在幻灯片区域即暂停轮播。鼠标离开即启动轮播 |
data-wrap | boolean | true | 轮播是否持续循环 |
Bootstrap图片旋转轮播的实现的更多相关文章
- 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图片轮播
<div class="carousel slide" id="myCarsousel" style="width:790px;"&g ...
- 图片轮播(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中的动态加载出来的图片轮播中的li标签中的class="active"的动态添加移除
//该方法是在slide改变时立即触发该事件, $('#myCarousel').on('slide.bs.carousel', function () { $("#myCarousel o ...
- 基于bootstrap的轮播广告页,带图片和文字
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
随机推荐
- SQLServer2008收缩数据库日志
-- Set to SIMPLE mode ALTER DATABASE [DATABASE_NAME] SET RECOVERY SIMPLE; -- Shrink the db ); -- Set ...
- android 中Log - 简单使用
例如,我们可以使用'Log.d'进行Debug,在java代码中输入Log.d(String tag, String message),tag为自己命名的tag,message为待输出的信息.然后打开 ...
- crud的意识
CRUD说的就是增查改删C:Create 增加对应CREATE TBL ...: ADD TBL IN (...) VALUES (...)R:Retrieve查询SELECT * from TBLU ...
- iOS中使用UIWebView与JS进行交互
iOS中使用UIWebView与JS进行交互 前一段忙着面试和复习,这两天终于考完试了,下学期的实习也有了着落,把最近学的东西更新一下,首先是使用UIWebView与JS进行交互 在webView中我 ...
- 简单总结焦点事件、Event事件对象、冒泡事件
每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...
- Shell 脚本编程笔记(一) Hello Shell
最近不断在接触Linux操作系统,对它一个终端走天下的特性感到十分新奇和伟大.同时也被各种命令折磨的死去活来...公司的一个老同事给我讲,在公司的极品geek宅都是只用一个黑黑的框完成一切的.结果我一 ...
- mysql报Fatal error encountered during command execution的解决办法
连接字符串里加上 Allow User Variables=True 解决. 否则时不时的报错,存储过程名长一点也报错,又有时报有时不报,参数传1位数就正常2位数就报错等…… 折腾mysql蛋疼啊
- linux常用svn命令(转载)
原地址:http://www.rjgc.net/control/content/content.php?nid=4418 1.将文件checkout到本地目录svn checkout p ...
- Powerpoin怎么制作电子相册|PPT制作电子相册教程
Powerpoin怎么制作电子相册?你是不是也对这一问题颇感兴趣呢?下面小编就为大家带来PPT制作电子相册详细教程,赶紧准备好你的自拍照什么的,开启Powerpoin制作电子相册之旅吧! Powerp ...
- 在C#中使用属性控件添加属性窗口
转自原文 在C#中使用属性控件添加属性窗口 第一步,创建在应用程序中将要展现的字段属性为public公有属性.其中,所有的属性必须有get和set的方法(如果不设置get方法,则要显示的属性不会显示在 ...