zoukankan      html  css  js  c++  java
  • bootstrap 获得轮播中的索引或当前活动的焦点对象

    今天用bootstrap做一个轮播,当轮播滚到每张图的时候,在页面下面就显示相对应的内容,那么问题来了:为了轮播图的可扩展性,我们肯定需要知道当前活动(显示图片)的索引号,查了bootstrap文档,文档上并没有直接提及(最新版的Bootstrap v3.3.7 ),但是在官网其实也简单有说明:

    在网络上找到的一个.getActiveIndex()方法,他适应于bootsrap v3.0.2,但是这个版本已经不能用了,所以就不再举例了。

    还有的博主说可以扩展成这样

    1 $('#myCarousel').on('slide.bs.carousel', function () {
    2              var carouselData = $(this).data('bs.carousel').$active; 
    3         });

    但是对于很多人来说这些将的并不是他们说需求的,而且.$active 只是在点击圆点的时候才会触发,自动播放是值是空的。

    所以在网上找了很多方法其实都不能用于是自己花了点时间仔细看了bootstrap文档将代码改好了

    1 $('#myCarousel').on('slide.bs.carousel', function (event) {
    2                 var $hoder = $('#myCarousel').find('.item'),
    3                     $items = $(event.relatedTarget);
    4                 //getIndex就是轮播到当前位置的索引
    5                 var getIndex= $hoder.index($items);
    6                 
    7                 
    8             })

    注意:索引都是从0开始的;然后还有很多可以改进的地方大家可以打印参数event里面有很多有用的值

    如果大家还有更好的建议或者其他需要帮助的可以留言哦!

  • 相关阅读:
    自习任我行第二阶段个人总结5
    自习任我行第二阶段个人总结4
    自习任我行第二阶段个人总结3
    自习任我行第二阶段个人总结2
    自习任我行第二阶段个人每日总结1
    bootstrap table
    log4j2 的使用
    新版本MySQL Server 5.7的免安装版本设置
    工作随笔 2016-5-19
    在windows 下安装启动redis
  • 原文地址:https://www.cnblogs.com/zuoyifeng/p/6839893.html
Copyright © 2011-2022 走看看