2021-10-14

carousel

bootscrap

直接看代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="/jquery-2.0.0.min.js"></script>
    <script src="/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <title>轮播图</title>
    <style>
        #mycarousel {
            /* 这里可以设置轮播图的大小 尽量与图片的宽度一样 */
            width: 600px;
            height: 400px;
        }
    </style>
</head>

<!-- 默认是:每5秒播放一次 -->

<body>
    <!-- 定义一个容器 -->
    <div class="container" id="mycarousel">
        <!-- 定义一个;轮播图 换灯片  并且定义一个id-->
        <!--  如果在这里定义的话:interval: 2000,   则需要手动开启一次,才会自动播放-->
        <div class="carousel slide" id="js-carousel">
            <!-- 定义一个 :轮播图-指示器 -->
            <ol class="carousel-indicators">
                <!--data-toggle指以什么事件触发,常用的如modal,popover,tooltips等,data-target指事件的目标,  -->
                <!-- 使用 data-slide-to 来向轮播床底一个原始滑动索引,data-slide-to="2" 将把滑块移动到一个特定的索引,索引从 0 开始计数。 -->
                <li data-targe="#js-carousel" data-slide-to="0" class="active"></li>
                <li data-targe="#js-carousel" data-slide-to="1" class=""></li>
                <li data-targe="#js-carousel" data-slide-to="2" class=""></li>
            </ol>

            <div class="carousel-inner">
                <div class="item active">
                    <img src="/Iimage/1.jpg" alt="">
                    <!-- 图片的描述可以用:carousel-caption -->
                    <div class="carousel-caption">
                        <h4>轮播1</h4>
                    </div>
                </div>
                <div class="item ">
                    <img src="/Iimage/1.jpg" alt="">
                    <div class="carousel-caption">
                        <h4>轮播2</h4>
                    </div>
                </div>
                <div class="item ">
                    <img src="/Iimage/1.jpg" alt="">
                    <div class="carousel-caption">
                        <h4>轮播3</h4>
                    </div>
                </div>
            </div>
            <!-- 定义2个  左右切换控件-->
            <!-- data-slide="prev":展示轮播图的前一页 -->
            <a href="#js-carousel" class="left carousel-control" data-slide="prev">
                <!-- span 中的类到bootscript官网组件查看 -->
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <!-- data-slide="prev":展示轮播图的后一页 -->
            <a href="#js-carousel" class="right carousel-control" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </div>



    <!-- 初始化 -->
    <!-- 这里的轮播图不用初始化 -->
    <script>
        // $('.carousel').carousel();
    </script>

    <!-- carousel:属性 设置 
        interval
        pause
        wrap
        keyboard
    -->
    <script>
        $("#js-carousel").carousel({
            // 注意这里的单位都是毫秒
            interval: 2000,
        })
    </script>
</body>

</html>

演示效果:
2021-10-14

上一篇:Property ‘next‘ does not exist on type ‘Component<any, {}, any>‘问题的解决方法


下一篇:Bootstrap 轮播图