• (十七)轮播插件


    一.轮播 

    • 轮播插件就是将几张同等大小的大图,按照顺序依次播放。 

    1、基本实例

    <div id="myCarousel" class="carousel slide" style="900px">
        <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>
        <div class="carousel-inner">
            <div class="item active"><img src="<%=path%>/img/slide1.png" alt="第一张"></div>
            <div class="item"><img src="<%=path%>/img/slide2.png" alt="第二张"></div>
            <div class="item"><img src="<%=path%>/img/slide3.png" alt="第三张"></div>
        </div>
        <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>

    • data 属性解释:
    1. data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置;
    2. data-slide-to 来向轮播底部创建一个原始滑动索引,data-slide-to="2"将把滑 动块移动到一个特定的索引,索引从 0 开始计数。
    3. data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放。

    2、轮播插件有三个自定义属性:

    • 如果在 JavaScript 调用就直接使用键值对方法,并去掉 data-; 
    //设置自定义属性
     $('#myCarousel').carousel({ 
    //设置自动播放/2 秒
     interval : 2000, 
    //设置暂停按钮的事件
     pause : 'hover', 
    //只播一次
     wrap : false,
     });

     3、轮播插件还提供了一些方法

     

    //点击按钮执行 
    $('button').on('click', function () {
     //点击后,自动播放 
    $('#myCarousel').carousel('cycle'); 
    //其他雷同 
    }

     4、事件

     

    //事件
     $('#myCarousel').on('slide.bs.carousel', function () {
     alert('当调用 slide 实例方式时立即触发'); 
    });
    $('#myCarousel').on('slid.bs.carousel', function () {
     alert('当轮播完成一个幻灯片触发');
     });
  • 相关阅读:
    java的枚举
    java解析XML的三种方法
    java静态代理
    java注释
    Jquery基础之DOM操作
    sql点滴43—mysql允许用户远程登陆
    js实现复制功能
    MVC ViewData和ViewBag
    Visual Studio 2013 Web开发新特性
    VisualStudio2013快捷键
  • 原文地址:https://www.cnblogs.com/shyroke/p/9192935.html
Copyright © 2020-2023  润新知