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 相关文章推荐
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 15 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
优化PHP代码技巧的小结
2013/06/02 PHP
浅析php header 跳转
2013/06/17 PHP
php图片缩放实现方法
2014/02/20 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
python压包的概念及实例详解
2021/02/17 Python
认购协议书范本
2014/04/22 职场文书
小学生环保倡议书
2014/05/15 职场文书
销售提升方案
2014/06/07 职场文书
小学学校评估方案
2014/06/08 职场文书
高中学校对照检查材料
2014/08/31 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript