• 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);
    });
  • 相关阅读:
    在 git 上 push 之后的代码如何撤回
    Git 如何暂存代码
    使用 Maven 聚合⼯程创建微服务
    使用 K8spacket 和 Grafana 对 K8S 的 TCP 数据包流量可视化
    Ceph 存储的那点事儿 — Trim/Discard
    7 张图解 CrashLoopBackOff,如何发现问题并解决它?
    Kubernetes 和 容器的退出码完整指南
    刚刚 Kubernetes 1.25 正式发布,包括这些重大变化
    在 MacOS 上通过 Lima 使用 Docker
    Consul API Gateway 0.4 已正式发布,包括这些新功能
  • 原文地址:https://www.cnblogs.com/seeding/p/15378527.html
Copyright © 2020-2023  润新知