Bootstrap carousel轮转图的使用
2015-07-31 21:34
651 查看
来自:慕课网 http://www.imooc.com/code/5395[/code]
图片轮播效果在Web中常常能看到,很多人也称之为幻灯片。其主要显示的效果就是多幅图片轮回播放,
从右向左播放,鼠标悬停在图片时会暂停播放,如果鼠标悬停或单击右下角圆点时,会显示对应的图片。
这种图片轮播效果,在Bootstrap框架中是通过Carousel插件来实现
演示效果截图:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style> body { padding: 10px; margin: 10px; } </style> </head> <body> <div id="carousel-example" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example" data-slide-to="0" class="active"></li> <li data-target="#carousel-example" data-slide-to="1"></li> <li data-target="#carousel-example" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home5.jpg" alt="..." /> <div class="carousel-caption">...</div> </div> <div class="item"> <img src="http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home2.jpg" alt="..." /> <div class="carousel-caption">...</div> </div> <div class="item"> <img src="http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home3.jpg" alt="..." /> <div class="carousel-caption">...</div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-example" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span></a> </div> <!--<script> $(function() { $('.carousel').carousel(); }); </script>--> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <!--<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>--> <!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>--> </body> </html>
例子
相关文章推荐
- Bootstrap组件之导航条
- 基于bootstrap3和jquery的分页插件
- bootstrap布局详解
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- 让Bootstrap 3兼容IE8浏览器
- Bootstrap组件之导航
- 基于bootstrap3和jquery的分页插件
- Bootstrap_遮罩提示
- Bootstrap 3支持IE 8遇到的一个小问题
- bootstrap 显示下拉框
- Bootstrap 入门(1)
- ISLR 5.3 Lab: Cross-Validation and the Bootstrap
- angular ui-bootstrap datepicker第二次点击没有显示时间选择 解决方案
- Bootstrap组件之输入框组
- bootstrap笔记
- Bootstrap css背景图片的设置
- Asp.net MVC利用Ajax.BeginForm实现bootstrap模态框弹出,并进行前段验证
- Bootstrap学习--CSS
- Bootstrap学习--认识Bootstarp
- bootstrap读书笔记---未完待续