Bootstrap

Bootstrap是基于HTML、CSS、JavaScript的前端开发框架，简单来说就是已经写好的样式和函数，我们直接通过在HTML元素中添加对应的class类就可以轻松调用这些写好的css样式和JS函数（个人理解，有错误的话欢迎指出，菜鸟在此表示感谢）。Bootstrap提供了大量的网页框架，包括导航栏、轮播图、登录页等，可以新手快速搭建一个漂亮的网页。

Bootstrap教程：

1.Bootstrap中文网

2.菜鸟教程

实现方法

1.下载bootstrap包，引入bootstrap.css（放在head标签里面，自己写的css文件之前）、 jquery-3.5.1.min.js和bootstrap.js（放在body标签里面的底部），位置和先后顺序很重要，否则会出错。如果不想下载，也可以在线引用。

2.在Bootstrap参考文档中直接复制轮播图的代码并粘贴，根据效果需要进行适当修改即可。

注意：下载的Bootstrap包和参考的Bootstrap文档版本一定要对应。

实现代码

HTML代码

<!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">
    <title>轮播图</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/main.css">
</head>
<body>
    <!-- Carousel -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
            <li data-target="#myCarousel" data-slide-to="4"></li>
            <li data-target="#myCarousel" data-slide-to="5"></li>
            <li data-target="#myCarousel" data-slide-to="6"></li>
            <li data-target="#myCarousel" data-slide-to="7"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="/images/1.jpg" alt="">
            </div>
            <div class="item">
                <img src="/images/2.jpg" alt="">
            </div>
            <div class="item">
                <img src="/images/3.jpg" alt="">
            </div>
            <div class="item">
                <img src="/images/4.jpg" alt="">
            </div>
            <div class="item">
                <img src="/images/5.jpg" alt="">
            </div>
            <div class="item">
                <img src="/images/6.jpg" alt="">
            </div>
            <div class="item">
                <img src="/images/7.jpg" alt="">
            </div>
            <div class="item">
                <img src="/images/8.jpg" alt="">
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
 
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
</body>
</html>