【BootStrap】图片轮播
来源:互联网 发布:isis组织 知乎 编辑:程序博客网 时间:2024/04/30 21:07
在之前的装修项目里,后期有个滑动预览图片的功能,那时候,整天都在调试页面布局,让我很崩溃,所以,自己并没有接过来做,就回复了负责人一句,不会实现。
“轮播”,不知道大家有没有听过这么一个词。这效果也就是做装修中所说的滑动查看图片,今天才知道,别人原来有个响亮而专业的名字:“轮播”。
下面,就一起来看看如何实现轮播的效果。
项目里前端框架采用的是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.每一次实践的过程都会带给我们不一样的体会,学习上,方法上,都有。
2 0
- bootstrap图片轮播
- Bootstrap图片轮播
- Bootstrap图片轮播
- 【BootStrap】图片轮播
- BootStrap图片轮播
- Bootstrap 图片轮播
- Bootstrap图片轮播
- Bootstrap---图片轮播
- bootstrap图片轮播
- BootStrap图片轮播做法
- bootstrap实现图片轮播
- 【Bootstrap】图片轮播组件Carousel
- bootstrap 旋转木马carousel 图片轮播
- AngularJS+ui.bootstrap实现图片轮播
- bootstrap下 图片轮播的实现
- bootstrap图片轮播+导航栏效果
- Bootstrap的图片轮播示例代码
- 全面解析Bootstrap图片轮播效果
- 数据类型
- 重建二叉树
- Digital Roots
- n&(n-1) 的作用记录
- UI自动布局
- 【BootStrap】图片轮播
- hjr教程-JSP(二):Jquery的ajax在jsp上的实现
- 在代码中设置drabwable
- poll总结
- Linux 三剑客之 sed 命令
- 桶排序
- python下的select模块使用 以及epoll与select、poll的区别
- windows上常用的cmd命令
- MySQL修改root密码的多种方法