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动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
基于javascript编写简单日历
May 02 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 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 fckeditor 调用的函数
2009/06/21 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
php的hash算法介绍
2014/02/13 PHP
javascript操作JSON的要领总结
2012/12/09 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
解析js如何获取css样式
2016/12/11 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python中下划线的使用方法
2015/03/27 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
python实现点对点聊天程序
2018/07/28 Python
Python制作exe文件简单流程
2019/01/24 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
Python ORM编程基础示例
2020/02/02 Python
网游商务专员求职信
2013/10/15 职场文书
二手房购房意向书范本
2014/04/01 职场文书
小升初自荐信范文
2015/03/05 职场文书
力克胡哲观后感
2015/06/10 职场文书
八月一日观后感
2015/06/10 职场文书
网络研修心得体会
2016/01/08 职场文书
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS
Python实现双向链表
2022/05/25 Python