BootStrap 获得轮播中的索引和当前活动的焦点对象
时间:2019-03-30
本文章向大家介绍BootStrap 获得轮播中的索引和当前活动的焦点对象,主要包括BootStrap 获得轮播中的索引和当前活动的焦点对象使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天用bootstrap做一个轮播,当轮播滚到每张图的时候,在页面下面就显示相对应的内容,那么问题来了:为了轮播图的可扩展性,我们肯定需要知道当前活动(显示图片)的索引号,查了bootstrap文档,文档上并没有直接提及(最新版的Bootstrap v3.3.7 ),但是在官网其实也简单有说明:
在网络上找到的一个.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里面有很多有用的值
- JVM活学活用——类加载机制
- WebAssembly详解及其使用案例
- 30分钟精通快应用
- BZOJ2440: [中山市选2011]完全平方数(莫比乌斯+容斥原理)
- Dapper扩展之~~~Dapper.Contrib
- JVM活学活用——GC算法 垃圾收集器
- BZOJ1101: [POI2007]Zap(莫比乌斯反演)
- freeRTOS事件组学习
- 洛谷P2522 [HAOI2011]Problem b(莫比乌斯反演)
- JVM活学活用——优化springboot
- .Net中的AOP读书笔记系列之AOP介绍
- 洛谷P3327 [SDOI2015]约数个数和(莫比乌斯反演)
- .Net中的AOP系列之构建一个汽车租赁应用(上)
- Modbus RTU驱动程序开发指引
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 有赞持续集成容器化实践
- 怎么创建一个良好的Git提交信息
- Epoll 如何工作的?
- 用函数式的方式思考——递归
- Linux等待队列原理与实现
- 微信小程序switchTab带参解决方法
- 微信小程序使用腾讯文档打开文档
- Vue.js属性装饰器库vue-property-decorator文档
- Vue Class Component文档翻译
- Vue使用深度选择器在scoped中修改第三方样式
- Redis Keyspace Notifications(Redis键空间通知)
- NodeJS使用Redis键的过期回调
- 深入Linux并发同步
- JS的页面生命周期事件
- Request请求库被废弃了! 我们该用什么替代?