zoukankan      html  css  js  c++  java
  • 聊一聊 bootstrap 的轮播图插件

    今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图。功能不需要太炫酷,那么bootstrap的插件是你的首要选择。

    使用方式

    引入js和css

    直接引入bootsrap.js和bootstrap.css两个文件即可。

    示例html代码

    
    <div id="myCarousel" class="carousel slide"> <!-- 轮播(Carousel)指标 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播(Carousel)项目 --> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> <div class="carousel-caption">标题 1</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> <div class="carousel-caption">标题 2</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> <div class="carousel-caption">标题 3</div> </div> </div> <!-- 轮播(Carousel)导航 --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
    

    上面的示例代码从菜鸟教程直接copy过来的。根据需要酌情删减。

    js初始化

    $('.carousel').carousel()
    carousel里面有一些选项,可以进行设置。

    interval:轮播的间隔时间,默认值5000

    pause:何时暂停,默认值hover,鼠标悬浮上去,则暂停。值改为null,意味着无论怎样都不暂停。

    wrap:轮播是否连环,默认为true。

    keyboard:是否相应键盘操作,默认为true。

    一些方法事件

    //轮播事件为200
    $('#identifier').carousel({
        interval: 2000
    })
    //从左到右循环轮播
    
    $('#identifier').carousel('cycle')
    //停止轮播
    $('#identifier').carousel('pause')
    //轮播到某一帧
    
    $('#identifier').carousel(0)
    $('#identifier').carousel(1)
    //轮播到上一个项目
    
    $('#identifier').carousel('prev')
    //轮播到下一个项目
    
    $('#identifier').carousel('next')
    
    

    回调函数

    //滑动时出发的回调
    
    $('#identifier').on('slide.bs.carousel', function () {
        // 执行一些动作...
     })
     
     //完成滑动过渡效果后,触发的事件
     
    $('#identifier').on('slid.bs.carousel', function () {
        // 执行一些动作...
     })
    

    自己使用例子

    搞一个点击哪里,跳转哪里的东西

    var car = $(".carousel");
    car.carousel('pause');
    $("#firstLi").bind("click", function() {
        car.carousel(0);
        car.carousel('pause');
    });
    
    $("#secondLi").bind("click", function() {
        car.carousel(1);
        car.carousel('pause');
    });
    

    有什么好处

    先说一下swiper插件,他确实好用,功能强大,但是不支持ie8。支持ie8的版本swiper2不支持自动调整高度的功能。
    owl-carousel支持自动调整高度,支持ie8.但是他在ie8下会有个闪烁的问题,这个官网也存在此问题,是个bug。
    最终bootstrap的轮播图最为好使。

  • 相关阅读:
    linux内核(四)内存管理单元MMU
    open函数详解
    linux内核(三)文件系统
    C++中数字与字符串之间的转换 scanf string总结(复习必读)
    hello程序的运行过程-从计算机系统角度
    剑指offer第12题打印从1到n位数以及大整数加法乘法
    2017-10-11第二次万革始面经
    为什么需要半关闭
    Ubuntu指令
    143. Reorder List
  • 原文地址:https://www.cnblogs.com/jichi/p/11264498.html
Copyright © 2011-2022 走看看