BootStrap 获得轮播中的索引和当前活动的焦点对象
网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要介绍了BootStrap 获得轮播中的索引和当前活动的焦点对象,本文给大家介绍的非常详细,需要的朋友可以参考下
今天用bootstrap做一个轮播,当轮播滚到每张图的时候,在页面狼蚁网站SEO优化就显示相对应的内容,那么问题来了:为了轮播图的可扩展性,我们肯定需要知道当前活动(显示图片)的索引号,查了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里面有很多有用的值
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程