全面解析Bootstrap中Carousel轮播的使用方法


Posted in Javascript onJune 13, 2016

本文实例为大家全面的解析了Bootstrap中Carousel的使用方法,供大家参考,具体内容如下

源码文件:

Carousel.scss
Carousel.js

实现原理:

隐藏所有要显示的元素,然后指定当前要显示的为block,宽、高自适应

源码分析:

 1、Html结构:主要分为以四个部分
  1.1、容器:最外层div,需要一个data-ride=”carousel”来指定为轮播放插件,并且提供一个Id,方便圆圈指示符的关联
  1.2、图片列表部分,用一个外层div包裹所有,然后每个img会被一个div,则class为item的包裹住
  1.3、圆圈指示符:用一个ol列表来显示其各图形列表项,每个列表项需要指定data-slide-to=”index”属性,用于标记当前圆圈的索引号
  1.4、左右控制按钮:实现向左、向右移动的功能
2、Css样式
  2.1、Carousel:只有一个相对定位标记
  2.2、Carousel-inner:旋转图片列表区域,其中每项有item来修饰
   2.2.1、其中的active、next、prev都认为是可见的
   2.2.2、Carousel-caption:表示每个item项应该有标题信息,默认显示下、中位置
  2.3、Carousel-control:设置向左、向右按钮的样式,其中会设置渐变、透明度等信息,提供了icon-prev、icon-next两种额外样式
  2.4、Carousel-indicators:圆圈部分样式,都是绝对定位,每个li设置为行内块元素,用text-indent:-999来隐藏字体
3、Js代码
  3.1、主要核心方法为slide,他实现了图片的切换
    3.1.1、在第一次进行图片切换的时候,都会调用pause方法来暂定定时器,在图片切换完成后才调用cycle方法来启用定时器
    3.1.2、接受的type和next两个参数
      3.1.2.1、Type:表示向上、还是向下换页
      3.1.2.2、Next:本次要显示为活动的Item项,如果不传入则需要通过getItemForDirection方法来获取
    3.1.3、在获取完成$active(当前活动的Item)、$next(需要成为活动项的Item)、isCycling(定时轮播的定时器句柄)、direction(方向)等基本参数
    3.1.4、然后触发slide.bs.carousel事件
    3.1.5、然后设置indicators的索引项
    3.1.6、切换图片,如果支持css动画就用动画切换,否则直接加css来切换
    3.1.7、动画切换原理:
      3.1.7.1、Prev:是向右滚动图片,会组合出的样式:active right(active项) prev right(下一项),这时prev自身为-100%,把图片放在最左边
      3.1.7.2、Next:是向左滚动图片 active left(active项)、next left(下一项),这时next自身为100%,把图片放在最右边
      3.1.7.3、Active right:图片应该是向右,那就应该运动图片宽度的100%
      3.1.7.4、Active left:图片向左,那就应该运行图片宽度的-100%
      3.1.7.5、对比图: 

全面解析Bootstrap中Carousel轮播的使用方法

    3.1.8、实现代码(不包含Css3):  

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
 display: block;
}
.carousel-inner > .active {
 left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
 position: absolute;
 top: 0;
 width: 100%;
}
.carousel-inner > .next {
 left: 100%;
}
.carousel-inner > .prev {
 left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
 left: 0;
}
.carousel-inner > .active.left {
 left: -100%;
}
.carousel-inner > .active.right {
 left: 100%;
}

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 #Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 #Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 #Javascript
JavaScript解八皇后问题的方法总结
Jun 12 #Javascript
jQuery遍历json的方法(推荐)
Jun 12 #Javascript
jQuery移动端图片上传组件
Jun 12 #Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 #Javascript
You might like
php检测url是否存在的方法
2015/04/14 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
详解django2中关于时间处理策略
2019/03/06 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
python实现人像动漫化的示例代码
2020/05/17 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
教师学习培训邀请函
2014/02/04 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
通信工程求职信
2014/07/16 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
oracle索引总结
2021/09/25 Oracle
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL