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 相关文章推荐
查看大图功能代码jquery版
Nov 05 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
JS实现520 表白简单代码
May 21 Javascript
深入理解Promise.all
Aug 08 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
Vue渲染过程浅析
Mar 14 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 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中MD5函数使用实例代码
2008/06/07 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
js中的json对象详细介绍
2014/10/29 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
Vue.directive()的用法和实例详解
2018/03/04 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
python生成带有表格的图片实例
2019/02/03 Python
Python数据类型之List列表实例详解
2019/05/08 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
python如何从键盘获取输入实例
2020/06/18 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
基于Python 函数和方法的区别说明
2021/03/24 Python
自荐信结尾
2013/10/27 职场文书
策划助理岗位职责
2013/11/18 职场文书
企业管理部经理岗位职责
2013/12/24 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
应聘会计求职信
2014/06/11 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
2015年采购工作总结
2015/04/10 职场文书
高中军训感想
2015/08/07 职场文书