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里面有很多有用的值
如果大家还有更好的建议或者其他需要帮助的可以留言哦!
bootstrap 获得轮播中的索引或当前活动的焦点对象的更多相关文章
- BootStrap 获得轮播中的索引和当前活动的焦点对象
$('#myCarousel').on('slide.bs.carousel', function (event) { var $hoder = $('#myCarousel').find('.ite ...
- bootstrap 获得轮播中的索引 getActiveIndex
今天想用bootstrap做一个轮播,当轮播滚到每张图的时候,在页面下面就显示相对应的内容,那么问题来了:我肯定需要知道当前活动(显示图片)的索引号,那么bootstrap的轮播组件要怎么获得这个索引 ...
- bootstrap中的动态加载出来的图片轮播中的li标签中的class="active"的动态添加移除
//该方法是在slide改变时立即触发该事件, $('#myCarousel').on('slide.bs.carousel', function () { $("#myCarousel o ...
- Bootstrap轮播获取当前活动的焦点对象
在项目中使用了Bootstrap的轮播,需求是轮播下方有一个已读按钮,当点击已读按钮时,隐藏掉当前的焦点的轮播内容: 如图所示: 所以要获取当前的焦点是哪一条: 下方代码是在网络上找到的一个方 ...
- 基于bootstrap的轮播广告页,带图片和文字
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- layui轮播中箭头不起作用问题
layui轮播中箭头不起作用问题 layui轮播插件在使用中发现箭头不起作用其他都合适,是什么原因造成的呢?发现单独提出layui中的demo是合适的,通过仔细慢慢的寻找,发现layui.use('c ...
- 聊一聊 bootstrap 的轮播图插件
今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图.功能不需要太炫酷,那么bootstrap的插件是你的首要选择. 使用方式 引入js ...
- Bootstrap幻灯轮播如何支持触屏左右滑动手势?
最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...
- 全面解析Bootstrap图片轮播效果
http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...
随机推荐
- Android中查看布局文件中的控件(view,id)在哪里被调用(使用)
在阅读别人的代码时通常是很痛苦的,有时很想要看一看布局中的控件在哪里被调用了,为之很苦恼 在这里提供一种方法. 复制要查看的控件ID,到R文件中搜索到该ID, 接下来就好办的了,选中ID按下C ...
- iOS开发之Run Loop
1.概述 (1) Run Loop提供了一种异步执行代码的机制,不能并行执行任务. (2) 在主队列中,Main Run Loop直接配合任务的执行,负责处理UI事件.计时器,以及其它内核相关事件. ...
- Java EE基础之JSP
从本篇文章开始,我会用文章记录下我在学习Java EE过程中的一些笔记和感悟,至于还没有更新结束的Java SE还是会继续写的,只是我觉得一直写语法很枯燥,自己也没法继续下去,所以带着点web学习,会 ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(一)System.out.print与Log
日常啰嗦 距离上一次更新博客有一段时间了,主要是因为最近有开发任务,另外,这段时间也在学习docker的相关知识,所以博客就没有继续写了,推荐一本书<Docker技术入门与实战>(第二版) ...
- 机器学习:R语言中如何使用最小二乘法
详细内容见上一篇文章:http://www.cnblogs.com/lc1217/p/6514734.html 这里只是介绍下R语言中如何使用最小二乘法解决一次函数的线性回归问题. 代码如下:(数据同 ...
- js获取url中的参数方法
直接调用函数即可,函数如下: function getURLParam(name) { return decodeURIComponent((new RegExp('[?|&]' + name ...
- PAT乙级练习1001
1001. 害死人不偿命的(3n+1)猜想 (15) 卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉一半.这样一直反复砍下去, ...
- 大数据测试之hadoop集群配置和测试
大数据测试之hadoop集群配置和测试 一.准备(所有节点都需要做):系统:Ubuntu12.04java版本:JDK1.7SSH(ubuntu自带)三台在同一ip段的机器,设置为静态IP机器分配 ...
- Struts2基础学习(一)—初识Struts2
目录 一.什么是Struts2 二.搭建Struts2的开发环境 三.Struts2的配置文件 四.MVC模式 一.什么是Struts2 Struts2是一个非常优秀的MVC框架,由传统 ...
- Android完全退出activity
在Android中,如果想退出Android程序,一般都是调用finish().System.exit(0).android.os.Process.killProcess(android.os.Pro ...