全面解析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 相关文章推荐
JavaScript格式化数字的函数代码
Nov 30 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
js读取本地文件的实例
Dec 22 Javascript
关于Vue在ie10下空白页的debug小结
May 02 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 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
Terran魔法科技
2020/03/14 星际争霸
php中的时间处理
2006/10/09 PHP
PHP学习之PHP变量
2006/10/09 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
php文件包含的几种方式总结
2019/09/19 PHP
让您的菜单不离网站
2006/10/03 Javascript
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
学习python的几条建议分享
2013/02/10 Python
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
Pytorch之parameters的使用
2019/12/31 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
会计出纳岗位职责
2013/12/25 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
爱情保证书
2015/01/17 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
2016党校培训心得体会
2016/01/07 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB