利用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>

左右播放组件：

<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>

注意href要链接父级元素id

巴特西

利用bootstrap实现图片Carousel效果

最新文章

热门文章