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停止输出代码
Jul 20 Javascript
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
React-router4路由监听的实现
Aug 07 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
vue 项目引入echarts 添加点击事件操作
Sep 09 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实现网页缓存的工具类分享
2015/07/14 PHP
php远程下载类分享
2016/04/13 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
JavaScript 学习笔记(六)
2009/12/31 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
python将字符串转换成json的方法小结
2019/07/09 Python
python绘制动态曲线教程
2020/02/24 Python
python输入中文的实例方法
2020/09/14 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
中学运动会广播稿
2014/01/19 职场文书
英语生日邀请函
2014/01/23 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
护理专科学生自荐书
2014/07/05 职场文书
农业项目建议书
2014/08/25 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
sql注入报错之注入原理实例解析
2022/06/10 MySQL