全面解析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 相关文章推荐
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
js获取Get值的方法
Sep 29 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
详解vue组件基础
May 04 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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解决中文乱码
2017/04/28 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
浅谈django中的认证与登录
2016/10/31 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
django settings.py 配置文件及介绍
2019/07/15 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
法学毕业生自我鉴定
2014/01/31 职场文书
学校安全教育制度
2014/01/31 职场文书
医药销售求职信范文
2014/02/01 职场文书
学术会议主持词
2014/03/17 职场文书
普通话演讲稿
2014/09/03 职场文书
小学运动会报道稿
2014/10/04 职场文书
拖欠货款起诉状
2015/05/20 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书