利用bootstrap实现图片Carousel效果

引入头文件：<link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="jquery-3.3.1.js"></script>

 开始写父级Div：

<div id="carouselExampleIndicators" class="carousel slide"
                 data-ride="carousel" style="height: 400px">
<div>

可通过data-intervel="2000" 来实现图片自动播放间隔为2s

图片下面的“点”：

<ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1" class=""></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2" class=""></li>
</ol>

 

 图片：

<div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="d-block w-500" src="a.jpg">
                    </div>
                    <div class="carousel-item" style="width: 300px;">
                        <img class="d-block w-500" src="b.jpg">
                    </div>
                    <div class="carousel-item" style="width: 300px;">
                        <img class="d-block w-500" width="500px" height="380px" src="c.jpg">
                    </div>
</div>

 

 左右播放组件：

<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="sr-only">Previous</span>
</a>
a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
         <span class="sr-only">Next</span>
</a>

注意href要链接父级元素id