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 相关文章推荐
HTML页面如何象ASP一样接受参数
Feb 07 Javascript
JS 的应用开发初探(mootools)
Dec 19 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 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根据日期判断星座的函数分享
2014/02/13 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
vue使用laydate时间插件的方法
2018/11/14 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
python通过shutil实现快速文件复制的方法
2015/03/14 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
2014年五一促销活动方案
2014/03/09 职场文书
志愿者活动总结
2014/04/28 职场文书
婚纱店策划方案
2014/05/22 职场文书
高中生学习计划书
2014/09/15 职场文书
土地租赁协议书
2015/01/29 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
单位推荐信范文
2015/03/27 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript