bootstrap 获得轮播中的索引 getActiveIndex
今天想用bootstrap做一个轮播,当轮播滚到每张图的时候,在页面下面就显示相对应的内容,那么问题来了:我肯定需要知道当前活动(显示图片)的索引号,那么bootstrap的轮播组件要怎么获得这个索引号呢~查了bootstrap文档,并没有看到,又看了b的js源码,找到个getActiveIndex()的方法,正是我需要的:
------适用于bootsrap v3.0.2其他版本不确定--------
具体用法如下:
1.html代码:(与bootsrap文档中的一毛一样。)
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> <!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" id="t1">
<img src="../imgs/0fool.jpg" alt="...">
<div class="carousel-caption">
<h3>标题1</h3>
<p>para1</p>
</div>
</div>
<div class="item" id="t2">
<img src="../imgs/1magician.jpg" alt="...">
<div class="carousel-caption">
<h3>标题2</h3>
<p>para2</p>
</div>
</div>
<div class="item" id="t3">
<img src="../imgs/2high-priestess.jpg" alt="...">
<div class="carousel-caption">
<h3>标题3</h3>
<p>para3</p>
</div>
</div>
</div> <!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
2。js代码:
监听slide.bs.carousel事件。每当轮播图滚动一次,便触发一次:
$('#carousel-example-generic').on('slide.bs.carousel', function () {
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getActiveIndex();//当前图片的索引,注意:这并不是下一张图的索引号
var items = carouselData.$items;//所有图片的包裹div的数组
});
注意:
(1).这个索引是从0开始的。
(2).getActiveIndex()获得索引,是当前的索引,并不是下一张图的索引:例如:我从第一张图滑到第二张图时,会触发这个事件,然后显示的index是0
(3).items获得的是一个数组,数组元素是class为.item的div元素。你可以打印出来看看
bootstrap 获得轮播中的索引 getActiveIndex的更多相关文章
- bootstrap 获得轮播中的索引或当前活动的焦点对象
今天用bootstrap做一个轮播,当轮播滚到每张图的时候,在页面下面就显示相对应的内容,那么问题来了:为了轮播图的可扩展性,我们肯定需要知道当前活动(显示图片)的索引号,查了bootstrap文档, ...
- BootStrap 获得轮播中的索引和当前活动的焦点对象
$('#myCarousel').on('slide.bs.carousel', function (event) { var $hoder = $('#myCarousel').find('.ite ...
- bootstrap中的动态加载出来的图片轮播中的li标签中的class="active"的动态添加移除
//该方法是在slide改变时立即触发该事件, $('#myCarousel').on('slide.bs.carousel', function () { $("#myCarousel o ...
- 基于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 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...
- Bootstrap实现轮播图
第一步:设计轮播图容器:div.carousel,添加slide平滑切换,并定义id,方便后面采用data属性来触发 <div class='carousel slide' id="t ...
随机推荐
- TOSCA自动化测试工具安装
1.下载链接 https://www.tricentis.com/software-testing-tools/ 2.免费试用14天, 弹出的页面输入邮箱地址--> 输入一堆信息-->点击 ...
- [2011-3-9 12:59 ]As3.0中的位图(Bitmap/BitmapData)用法
1.位图使用(模糊)滤镜 //创建一个矩形区域的BitmapData var bmd:BitmapData = new BitmapData(80, 30, false, 0xefefef); //画 ...
- jmeter+http接口测试
参考: http://blog.csdn.net/github_27109687/article/details/71968662 Jmeter接口测试+压力测试 http://blog.csdn ...
- springboot 监控
一.什么是spring-boot-starter-actuator(doc) springboot项目如何检查配置与运行状态呢?官方提供了一些接口可以查看springboot项目运行情况,只需要导入s ...
- MVC 中的家常事
对于@后面变量加上括号解决异意的方法 例如: hello@User.Name 会误判为电子邮箱,解决办法是括号,即hello@(User.Name) 使用@Html.Raw()输出后台到.cshtml ...
- Thinkphp5.0实战开发二------自动生成目录结构
序言 ThinkPHP5.0 具备自动创建功能,可以用来自动生成需要的模块及目录结构和文件等,自动生成主要调用\think\Build 类库.ThinkPHP5.0中模块文件夹在application ...
- RocEDU.阅读.写作《苏菲的世界》书摘
我们在成长的过程当中,似乎失去了对这世界的好奇心.也正因此,我们丧失了某种极为重要的能力(这也是一种哲学家们想要使人们恢复的能力).因为,在我们内心的某处,有某个声音告诉我们:生命是一种很庞大的.神秘 ...
- Fiddler4工具配置及调试手机和PC端浏览器
Fiddler最大的用处: 模拟请求.修改请求.手机应用调试 Fiddler最新版本 下载地址: http://www.telerik.com/download/fiddler Fiddler 想要监 ...
- shell内置命令eval的具有什么作用
答:把变量中的内容当成命令来执行
- Android 7.1 快捷方式 Shortcuts
转载请注明出处:王亟亟的大牛之路 前些天就看到相关内容了,但是最近吸毒比较深(wow),所以没有紧跟潮流,今天补一篇. 先安利:https://github.com/ddwhan0123/Useful ...