【BootStrap】图片轮播
2016-04-19 20:14
337 查看
在之前的装修项目里,后期有个滑动预览图片的功能,那时候,整天都在调试页面布局,让我很崩溃,所以,自己并没有接过来做,就回复了负责人一句,不会实现。
“轮播”,不知道大家有没有听过这么一个词。这效果也就是做装修中所说的滑动查看图片,今天才知道,别人原来有个响亮而专业的名字:“轮播”。
下面,就一起来看看如何实现轮播的效果。
项目里前端框架采用的是BootStrap,对BootStrap只是听过,而没有真正了解过的童鞋,不妨百度一下:BootStrap。
【实现分析】
一.结构分析
一个轮播图片主要包括三个部分:
轮播的图片、轮播图片的计数器、轮播图片的控制器
二.实现步骤
第1步:
设计轮播图片的容器。在
Bootstrap 框架中采用 carousel 样式,并且给这个容器定义一个 ID 值,方便后面采用 data 属性来声明触发。
第2步:
设计轮播图片的计数器。在容器
div.carousel 的内部添加轮播图片计算器,采用 carousel-indicators 样式,其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li),一般采用有顺列表来制作。
第3步:
设计轮播图片播放区。轮播图整个效果中,播放区是最关键的一个区域,这个区域主要用来放置需要轮播的图片。这个区域使用
carousel-inner 样式来控制,而且其同样放置在 carousel 容器内,并且通过 item 容器来放置每张轮播的图片。
第4步:
设置轮播图片描述.很多轮播图片效果,在每个图片上还对应有自己的标题和描述内容。其实
Bootstrap 框架中的 Carousel 也提供类似的效果。只需要在 item 中图片底部添加对应的代码.
第5步:
设计轮播图片控制器。很多时候轮播图片还具有一个向前播放和向后播放的控制器。在
Carousel 中通过 carousel-control样式配合 left 和 right 来实现。其中left表示向前播放,right表示向后播放。其同样放在carousel容器内。
三.代码展示
四.效果演示
【学习收获】
1.在接触新东西时,总是觉得难,做完之后,才发现其实很简单。
2.站在巨人的肩膀上,很多东西多查查,会让我们达到事半功倍的效果。
3.每一次实践的过程都会带给我们不一样的体会,学习上,方法上,都有。
“轮播”,不知道大家有没有听过这么一个词。这效果也就是做装修中所说的滑动查看图片,今天才知道,别人原来有个响亮而专业的名字:“轮播”。
下面,就一起来看看如何实现轮播的效果。
项目里前端框架采用的是BootStrap,对BootStrap只是听过,而没有真正了解过的童鞋,不妨百度一下:BootStrap。
【实现分析】
一.结构分析
一个轮播图片主要包括三个部分:
轮播的图片、轮播图片的计数器、轮播图片的控制器
二.实现步骤
第1步:
设计轮播图片的容器。在
Bootstrap 框架中采用 carousel 样式,并且给这个容器定义一个 ID 值,方便后面采用 data 属性来声明触发。
第2步:
设计轮播图片的计数器。在容器
div.carousel 的内部添加轮播图片计算器,采用 carousel-indicators 样式,其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li),一般采用有顺列表来制作。
第3步:
设计轮播图片播放区。轮播图整个效果中,播放区是最关键的一个区域,这个区域主要用来放置需要轮播的图片。这个区域使用
carousel-inner 样式来控制,而且其同样放置在 carousel 容器内,并且通过 item 容器来放置每张轮播的图片。
第4步:
设置轮播图片描述.很多轮播图片效果,在每个图片上还对应有自己的标题和描述内容。其实
Bootstrap 框架中的 Carousel 也提供类似的效果。只需要在 item 中图片底部添加对应的代码.
第5步:
设计轮播图片控制器。很多时候轮播图片还具有一个向前播放和向后播放的控制器。在
Carousel 中通过 carousel-control样式配合 left 和 right 来实现。其中left表示向前播放,right表示向后播放。其同样放在carousel容器内。
三.代码展示
<!-- 图片轮播效果区域-胡志婷-2016年4月19日17:44:58 --> <!-- 轮播(Carousel)容器 --> <div id="myCarousel" class="carousel slide"> <!-- 轮播(Carousel)指标 --> <ol class="carousel-indicators"> <li style="margin-left:20px;" data-target="#myCarousel" data-slide-to="0" class="active"></li> <li style="margin-left:20px;" data-target="#myCarousel" data-slide-to="1"></li> <li style="margin-left:20px;" data-target="#myCarousel" data-slide-to="2"></li> <li style="margin-left:20px;" data-target="#myCarousel" data-slide-to="3"></li> <li style="margin-left:20px;" data-target="#myCarousel" data-slide-to="4"></li> </ol> <!-- 轮播(Carousel)项目 --> <div class="carousel-inner"> <div class="item active"> <img class="carouselimg" src="../style/images/1.jpg" alt="First slide"> </div> <div class="item"> <img class="carouselimg" src="../style/images/2.jpg" alt="Second slide"> </div> <div class="item"> <img class="carouselimg" src="../style/images/3.jpg" alt="Third slide"> </div> <div class="item"> <img class="carouselimg" src="../style/images/4.jpg" alt="Fourth slide"> </div> <div class="item"> <img class="carouselimg" src="../style/images/5.jpg" alt="Fifth slide"> </div> </div> <!-- 轮播(Carousel)导航 --> <a class="carousel-control left" style="width:85px;" href="#myCarousel" data-slide="prev"> <img class="carouselleft" src="../style/images/left.png" /> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <img class="carouselright" src="../style/images/right.png"/> </a> </div>
四.效果演示
【学习收获】
1.在接触新东西时,总是觉得难,做完之后,才发现其实很简单。
2.站在巨人的肩膀上,很多东西多查查,会让我们达到事半功倍的效果。
3.每一次实践的过程都会带给我们不一样的体会,学习上,方法上,都有。
相关文章推荐
- bootstrap复杂表格
- bootstrap得动态进度条
- Bootstrap学习 - 组件
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(二)
- BootstrapTable+KnockoutJS实现增删改查解决方案
- Date Range Picker 插件 bootstrap
- bootstrap-标题
- bootstrap支持ie8 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一)
- bootstrap的demo网站
- 基于Bootstrap实现Material Design风格表单插件 附源码下载
- Bootstrap 模态框(Modal)插件数据传值
- 基于Bootstrap实现Material Design风格表单插件 附源码下载
- Bootstrap简介
- JS组件Bootstrap ContextMenu右键菜单使用方法
- JS组件Bootstrap dropdown组件扩展hover事件
- Bootstrap学习 - 全局CSS样式
- JS组件Bootstrap dropdown组件扩展hover事件
- JS组件Bootstrap ContextMenu右键菜单使用方法
- 在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)