Bootstrap3 轮播之个人学习笔记
来源:互联网 发布:点阵字体编辑软件 编辑:程序博客网 时间:2024/06/06 04:01
Bootstrap3 轮播
标签(空格分隔): Bootstrap
目标
实现Bootstrap 自带的轮播效果。
效果图:
参考代码:
<body style="width:900px; margin-left:auto; margin-right:auto;"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" style="text-align:center"> <div class="item active"> <img alt="First slide" src="http://placehold.it/900x500/78EB09/FFEB09/&text=First slide" ></img> </div> <div class="item"> <img alt="Second slide" src="http://placehold.it/900x500/78EB09/FFEB09/&text=Second slide" ></img> </div> <div class="item"> <img alt="Third slide" src="http://placehold.it/900x500/78EB09/FFEB09/&text=Third slide" ></img> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript">//$('.carousel').carousel('next'); </script> </body>
Internet Explorer 8 & 9 不支持过渡动画效果
Bootstrap 基于 CSS3 实现动画效果,但是 Internet Explorer 8 & 9 不支持这些必要的 CSS 属性。因此,使用这两种浏览器时将会丢失过渡动画效果。而且,Bootstrap 并不打算使用基于 jQuery 实现替代功能。
内容
.carousel
轮播slide
平滑过渡carousel-inner
item
轮播项carousel-caption
可选项,为每帧幻灯片添加文字说明,也可以添加任何 HTML 代码,这些 HTML 代码将会被自动排列和格式化。
用法
data
控制轮播的定位data-slide
控制播放位置的 prev 和 nextdata-slide-to
可以传递开始的幻灯片下标data-ride="carousel"
标记页面加载之后开始启动的轮播组件
方法
$("").carousel(options)
- .carousel(‘cycle’) 从左到右循环各帧。
- .carousel(‘pause’) 停止轮播。
- .carousel(number) 将轮播定位到指定的帧上(帧下标以 0 开始,类似数组)。
- .carousel(‘prev’) 返回到上一帧。
- .carousel(‘next’) 转到下一帧。
事件
阅读全文
0 0
- Bootstrap3 轮播之个人学习笔记
- Bootstrap3 工具提示之个人学习笔记
- Bootstrap3 按钮改进之个人学习笔记
- Bootstrap3 导航之个人学习笔记
- Bootstrap3 导航条之个人学习笔记
- Bootstrap3 排版之个人学习笔记
- Bootstrap3 标签和徽章之个人学习笔记
- Bootstrap3轮播
- Bootstrap3轮播
- Bootstrap3学习笔记
- Bootstrap3学习笔记---2
- bootstrap3学习笔记
- Bootstrap3.0学习笔记之按钮的样式
- Bootstrap3.0 学习笔记之按钮的样式
- Bootstrap3.0学习第二十六轮(JavaScript插件——图片轮播)
- Bootstrap3.0学习第二十六轮(JavaScript插件——图片轮播)
- bootstrap3学习笔记1-排版
- 学习笔记之js实现图片轮播效果
- 欢迎使用CSDN-markdown编辑器
- 在Raspberry Pi 3B上使用Python访问BLE设备
- PHP中字符安全过滤函数使用小结
- python函数
- VS2017新建项目自动添加头文件
- Bootstrap3 轮播之个人学习笔记
- Java 中>>和>>>的区别
- 大牛博客集合
- react打包过程遇到的问题
- 图的深度优先遍历
- UIWebView加载网页内存占用过高
- iOS开发NSString篇:字符串每隔几个字符插入某个字符
- curl验证,调用webservice接口
- 夜神模拟器和hbuilder连接