下拉菜单与轮播图的实现

最新推荐文章于 2022-09-21 16:47:47 发布

暮白寒窗雪

最新推荐文章于 2022-09-21 16:47:47 发布

阅读量2.1k

点赞数 3

文章标签： bootstrap html5

本文链接：https://blog.csdn.net/tiben/article/details/119813254

版权

本文介绍了如何使用Bootstrap实现下拉菜单和轮播图效果。首先讲解了折叠菜单的实现，展示了点击按钮前后的效果。接着详细阐述了轮播图的功能，包括鼠标悬停停止切换、左右按钮切换图片、轮播图指示器等功能，并提供了代码实现。最后，将轮播图效果应用到简单网页界面，增强了用户体验。

摘要由CSDN通过智能技术生成

下拉菜单与轮播图的实现

一、折叠菜单

<body>
    <a href="#collapseExample" class="btn btn-primary" data-toggle="collapse">
        iPhone 12 pro
    </a>
    <br><br>
    <div class="collapse" id="collapseExample">
        <div class="card card-body">
            iPhone爆款限时出售！神秘消费券限时领取！满2000减200！精彩不容错过！！！
        </div>
        <div class="card card-body">
            iPhone爆款限时出售！神秘消费券限时领取！满2000减200！精彩不容错过！！！
        </div>
        <div class="card card-body">
            iPhone爆款限时出售！神秘消费券限时领取！满2000减200！精彩不容错过！！！
        </div>
    </div>
</body>

效果图如下
点击按钮之前
在这里插入图片描述
点击按钮之后，这样就实现了下拉菜单的效果

二、轮播图的实现

1、当鼠标移动到图片上时，停止自动切换
2、当用户单击左侧的按钮时，图片切换到上一张
3、当用户单击右侧的按钮时，图片切换到下一张
4、在图片下方有轮播图指示器，指示图片的显示状态
代码实现

<body>
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <!-- 轮播图指示器 -->
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleControls" data-slide-to="0"></li>
            <li data-target="#carouselExampleControls" data-slide-to="1" class="active"></li>
            <li data-target="#carouselExampleControls" data-slide-to="2"></li>
            <li data-target="#carouselExampleControls" data-slide-to="3"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item">
                <img src="../image/5.png" alt="..." class="d-block w-100">
            </div>
            <div class="carousel-item active">
                <img src="../image/6.png" alt="..." class="d-block w-100">
            </div>
            <div class="carousel-item">
                <img src="../image/7.png" alt="..." class="d-block w-100">
            </div>
            <div class="carousel-item">
                <img src="../image/8.png" alt="..." class="d-block w-100">
            </div>
        </div>
        <!-- 查看上一张 -->
        <a href="#carouselExampleControls" class="carousel-control-prev" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <!-- 查看下一张 -->
        <a href="#carouselExampleControls" class="carousel-control-next" role="button" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</body>

效果图如下在这里插入图片描述上面的小箭头点击之后可以切换上一张或下一张，下面显示的是图片的数量以及当前显示的是第几张图片，并且在点击下面的横条的时候，也能切换图片，这就是轮播图的效果

三、简单网页界面（具有轮播图效果）

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
        <h1 class="title">
            <a href="#" class="navbar-brand">
                <img src="../project/image/logo.png" alt="logo" width="40" height="40">
            </a>
        </h1>
        <!-- 折叠按钮 -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div