全面解析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 相关文章推荐
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
Vue slot用法(小结)
Oct 22 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 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实现cookie加密的方法
2015/03/10 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
C/C++有关内存的思考题
2015/12/04 面试题
弘扬民族精神演讲稿
2014/05/07 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
2014年体育部工作总结
2014/11/13 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python