• BootStrap 轮播效果


    一.轮播效果


    1. 一个最简单的经典幻灯片轮播效果,如下:

    <div class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="img/1.png" class="w-100" alt="">
            </div>
            <div class="carousel-item">
                <img src="img/2.png" class="w-100" alt="">
            </div>
            <div class="carousel-item">
                <img src="img/3.png" class="w-100" alt="">
            </div>
        </div>
    </div>


    2. 给轮播幻灯片两侧加上切换按钮,具体如下:

    <div id="carousel" class="carousel slide" data-ride="carousel">
        ...
        <a class="carousel-control-prev" href="#carousel" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#carousel" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>


    3. 给轮播幻灯片底部加上切换按钮,具体如下:

    <div id="carousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
            <li data-target="#carousel" data-slide-to="2"></li>
        </ol>
        ...
    </div>


    4. 给轮播幻灯片底加上一些字符说明,具体如下:

    <div class="carousel-item active">
        <img src="img/1.png" class="w-100" alt="">
        <div class="carousel-caption">
            <h5>Bootstrap4.x</h5>
            <p>这是一款前端样式库,很好用,样式也比较多,大概如此吧...</p>
        </div>
    </div>


    5. 给轮播幻灯片设置渐进式轮播效果,具体如下:

    <div class="carousel slide carousel-fade" ></div>

    6. 通过 JS 控制,来设置轮播的各项数值,代替 data-ride="carousel";

    $('.carousel').carousel({
        //轮播间隔 500 毫秒
        interval : 500,
    });

    7. 通过 JS 控制,使用按钮来控制轮播器的各项操作;
    $('.button').click(function () {
        //开始播放
        $('.carousel').carousel('cycle');
        //停止播放
        $('.carousel').carousel('pause');
        //上一张
        $('.carousel').carousel('prve');
        //下一张
        $('.carousel').carousel('next');
        //轮播到指定的图片
        $('.carousel').carousel(2);
    });
  • 相关阅读:
    深入理解Java虚拟机-走进Java
    springboot服务引入外部jar包在windows运行正常,在linux环境上无法加载到引入jar包的类
    ActiveMQ数据接收类型问题
    kafka报文一直打印的问题
    Java基本语法
    flask跨域问题
    flask接口传参
    iTextSharp导出PDF模板(报告)
    ASP.NET中<%=%>、<%%>、<%@%>、<%#%>的用法与区别
    python AES+SHA1PRNG
  • 原文地址:https://www.cnblogs.com/seeding/p/15378527.html
Copyright © 2020-2023  润新知