效果图：

 一、准备相关文件

1.下载bootstrap：Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。https://v3.bootcss.com/

2. 创建文件夹，基本骨架如下：

3.在index.html的<head>标签中引入相关样式文件

<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">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    //注意jquery引用顺序要在bootstrap前面
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>

二、准备好轮播图，剩下的交给bootstrap

1.在bootstrap上找到我们的轮播图js组件，直接复制代码到我们的要实现轮播图的div中，并且更换好自己准备的图片。

<div class="focus">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators 小圆点-->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides 轮播图-->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="upload/banner1.dpg" alt="...">
                    <div class="carousel-caption">
                        demo1
                    </div>
                </div>
                <div class="item">
                    <img src="upload/banner2.dpg" alt="...">
                    <div class="carousel-caption">
                        demo2
                    </div>
                </div>
                <div class="item">
                    <img src="upload/banner3.dpg" alt="...">
                    <div class="carousel-caption">
                        demo3
                    </div>
                </div>
            </div>

            <!-- Controls 左右翻页-->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
//设置自动播放换图时间   单位ms
<script>
    $('.carousel').carousel({
        interval: 2000
    })
</script>

最后，如果图片的大小跟框架不匹配，我们可以单独设置其属性，并且把权重设为最高

<style>
    .focus {
        width: 800px;
        height: 300px;
        background-color: pink;
        margin: 100px auto;
    }
        
    .carousel,
    .carousel img {
        width: 100%;
        height: 300px!important;
    }
</style>

# bootstrap # html # javascript
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟