zoukankan      html  css  js  c++  java
  • 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);
    });
  • 相关阅读:
    QT编译时 cc1plus进程占用大量内存卡死问题解决
    python import cv2 出错:cv2.x86_64-linux-gnu.so: undefined symbol
    python ImportError: No module named builtins
    OSError: libcudart.so.7.5: cannot open shared object file: No such file or directory
    二维数组和二级指针(转)
    C/C++中无条件花括号的妙用
    C语言中do...while(0)的妙用(转载)
    卸载 ibus 使Ubuntu16.04任务栏与启动器消失 问题解决
    关于Qt creator 无法使用fcitx输入中文的问题折腾
    QT error: cannot find -lGL
  • 原文地址:https://www.cnblogs.com/seeding/p/15378527.html
Copyright © 2011-2022 走看看