BootStrap 获得轮播中的索引和当前活动的焦点对象


Posted in Javascript onMay 11, 2017

今天用bootstrap做一个轮播,当轮播滚到每张图的时候,在页面下面就显示相对应的内容,那么问题来了:为了轮播图的可扩展性,我们肯定需要知道当前活动(显示图片)的索引号,查了bootstrap文档,文档上并没有直接提及(最新版的Bootstrap v3.3.7 ),但是在官网其实也简单有说明:

BootStrap 获得轮播中的索引和当前活动的焦点对象

在网络上找到的一个.getActiveIndex()方法,他适应于bootsrap v3.0.2,但是这个版本已经不能用了,所以就不再举例了。

还有的博主说可以扩展成这样

$('#myCarousel').on('slide.bs.carousel', function () {
       var carouselData = $(this).data('bs.carousel').$active; 
     });

但是对于很多人来说这些将的并不是他们说需求的,而且.$active 只是在点击圆点的时候才会触发,自动播放是值是空的。

所以在网上找了很多方法其实都不能用于是自己花了点时间仔细看了bootstrap文档将代码改好了

$('#myCarousel').on('slide.bs.carousel', function (event) {
        var $hoder = $('#myCarousel').find('.item'),
          $items = $(event.relatedTarget);
        //getIndex就是轮播到当前位置的索引
        var getIndex= $hoder.index($items);
      })

注意:索引都是从0开始的;然后还有很多可以改进的地方大家可以打印参数event里面有很多有用的值

Javascript 相关文章推荐
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
微信小程序 navbar实例详解
May 11 #Javascript
微信小程序 图片宽高自适应详解
May 11 #Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 #Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 #Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 #Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 #Javascript
jQuery zTree树插件动态加载实例代码
May 11 #jQuery
You might like
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
JavaScript 布尔操作符解析  && || !
2012/08/10 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
python实现顺序表的简单代码
2018/09/28 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
家居设计专业个人自荐信范文
2013/11/26 职场文书
电子技术专业中专生的自我评价
2013/12/17 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
小学毕业感言50字
2014/02/16 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
新学期开学标语
2014/06/30 职场文书
保密工作整改报告
2014/11/06 职场文书
婚宴新郎致辞
2015/07/28 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python