2021-10-14

2021-10-14 20:58:26 阅读：165 来源： 互联网

标签：10 轮播 bootscrap height width 2021 carousel 400px 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>

演示效果：
在这里插入图片描述

标签：10,轮播,bootscrap,height,width,2021,carousel,400px,14
来源： https://blog.csdn.net/weixin_45035921/article/details/120772560

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2021-10-14

carousel

bootscrap