利用bootstrap实现图片Carousel效果

标签：cte   hand   ted   item   data   ref   img   tle   styles   

引入头文件：

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

标签：cte   hand   ted   item   data   ref   img   tle   styles   

原文地址：https://www.cnblogs.com/DSYR/p/9979170.html