全面解析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 相关文章推荐
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
JavaScript 学习历程和心得分享
Dec 12 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
js实现多图左右切换功能
Aug 04 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 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中mysql与mysqli的区别分析
2013/06/10 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
学习YUI.Ext第五日--做拖放Darg&Drop
2007/03/10 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
python使用scrapy解析js示例
2014/01/23 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
Python操作Jira库常用方法解析
2020/04/10 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
中国梦的演讲稿
2014/01/08 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
二年级小学生评语
2014/04/21 职场文书
购房协议书范本
2014/10/02 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
Spring Boot实现文件上传下载
2022/08/14 Java/Android