利用bootstrap实现图片Carousel效果

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41684261/article/details/84203890

引入头文件:<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

展开阅读全文

没有更多推荐了,返回首页