手把手教你使用bootstrap完成轮播图

最新推荐文章于 2024-05-02 17:43:45 发布

我莫得感情_

最新推荐文章于 2024-05-02 17:43:45 发布

阅读量1.5w

点赞数 15

本文链接：https://blog.csdn.net/weixin_42442856/article/details/122069030

版权

JavaScript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

bootstrap

3 篇文章 1 订阅

订阅专栏

效果图：

2. 创建文件夹，基本骨架如下：

3.在index.html的<head>标签中引入相关样式文件

<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>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    //注意jquery引用顺序要在bootstrap前面
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>

二、准备好轮播图，剩下的交给bootstrap

1.在bootstrap上找到我们的轮播图js组件，直接复制代码到我们的要实现轮播图的div中，并且更换好自己准备的图片。

<div class="focus">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators 小圆点-->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides 轮播图-->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="upload/banner1.dpg" alt="...">
                    <div class="carousel-caption">
                        demo1
                    </div>
                </div>
                <div class="item">
                    <img src="upload/banner2.dpg" alt="...">
                    <div class="carousel-caption">
                        demo2
                    </div>
                </div>
                <div class="item">
                    <img src="upload/banner3.dpg" alt="...">
                    <div class="carousel-caption">
                        demo3
                    </div>
                </div>
            </div>

            <!-- Controls 左右翻页-->
            <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
//设置自动播放换图时间   单位ms
<script>
    $('.carousel').carousel({
        interval: 2000
    })
</script>

最后，如果图片的大小跟框架不匹配，我们可以单独设置其属性，并且把权重设为最高

<style>
    .focus {
        width: 800px;
        height: 300px;
        background-color: pink;
        margin: 100px auto;
    }
        
    .carousel,
    .carousel img {
        width: 100%;
        height: 300px!important;
    }
</style>