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性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
JavaScript门面模式详解
Oct 19 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
简单聊聊TypeScript只读修饰符
Apr 06 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 学习提高路线分享
2011/10/23 PHP
discuz目录文件资料汇总
2014/12/30 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
js 操作select相关方法函数
2009/12/06 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
javascript 闭包详解
2015/07/02 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
python每天定时运行某程序代码
2019/08/16 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
网络维护管理员的自我评价分享
2013/11/11 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
保密承诺书
2014/03/27 职场文书
股份转让协议书
2014/04/12 职场文书
旅游节目策划方案
2014/05/26 职场文书
计算机专业自荐信范文
2014/05/28 职场文书