Bootstarp4 设计网页轮播组件

最新推荐文章于 2023-12-20 09:16:56 发布

JSON_L

最新推荐文章于 2023-12-20 09:16:56 发布

阅读量340

点赞数 2

分类专栏：前端文章标签：前端 html5 bootstrap

本文链接：https://blog.csdn.net/json_ligege/article/details/132852482

版权

前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

很多网站都有广告轮播功能，可使用bootstrap4中的carousel组件非常简单的实现。

下载bootstrap4

下载 Bootstrap · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网

轮播功能实现

简单实现轮播组件

需要引入bootstrap.css和bootstrap.js文件，因为需要依赖jquery还需要引入jquery。

功能实现：可以自动切换幻灯片和左右控制按钮切换。

内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页轮播组件</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div id="carousel" class="carousel slide" data-ride="carousel">
    <!--幻灯片-->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="./images/1.jpg" class="d-block w-100" alt="1">
        </div>
        <div class="carousel-item">
            <img src="./images/2.jpg" class="d-block w-100" alt="2">
        </div>
        <div class="carousel-item">
            <img src="./images/3.jpg" class="d-block w-100" alt="3">
        </div>
    </div>
    <!--幻灯片-->
    <!--控制按钮-->
    <button class="carousel-control-prev" type="button" data-target="#carousel" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-target="#carousel" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </button>
    <!--控制按钮-->
</div>
<script src="./js/jquery-3.2.1.js"></script>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>

说明：在上面的结构中，carousel类定义轮播包含框，在指示器包含框中，data-target="#carousel"属性指定目标包含容器为<div id="carousel">。

carousel-inner类定义轮播图片包含框，carousel-control-prev类和carousel-control-next类定义两个控制按钮，用来控制播放行为。

其中data-ride="carousel"属性用于定义轮播在页面加载时就开始动画播放，data-slide="prev"和data-slide="next"属性用于激活按钮行为，active类定义轮播的活动项，slide类定义动画效果。

其中图片引用了.d-block和.w-100样式，以修正浏览器预设的图像对齐带来的影响。

在轮播图片包含框中，carousel-item类定义轮播项包含框。

效果：

增加标识图标

carousel-indicators类定义轮播指示器包含框，使用data-slide-to="0"定义播放顺序的下标，效果为在轮播图中心下方增加图标切换。

内容如下：

<div id="carousel" class="carousel slide" data-ride="carousel">
    <!--标识图标-->
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>
    <!--标识图标-->
    <!--幻灯片-->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="./images/1.jpg" class="d-block w-100" alt="1">
        </div>
        <div class="carousel-item">
            <img src="./images/2.jpg" class="d-block w-100" alt="2">
         </div>
        <div class="carousel-item">
            <img src="./images/3.jpg" class="d-block w-100" alt="3">
        </div>
    </div>
    <!--幻灯片-->
    <!--控制按钮-->
    <button class="carousel-control-prev" type="button" data-target="#carousel" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-target="#carousel" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </button>
    <!--控制按钮-->
</div>

效果：

增加标题和说明

使用carousel-caption类定义轮播图的标题和说明。

内容如下：

<div class="carousel-item">
    <img src="./images/3.jpg" class="d-block w-100" alt="3">
    <div class="carousel-caption">
        <h1>标题3</h1>
        <p>说明</p>
    </div>
</div>

效果：

切换淡入淡出

轮播图切换效果改为淡入淡出可以使用添加.carousel-fade类。

内容如下：

设置数据间隔

可以通过data-interval=""添加到carousel-item元素上，设置每个图片切换数据间隔。

内容如下：

<div class="carousel-inner">
    <div class="carousel-item active" data-interval="5000">
        <img src="./images/1.jpg" class="d-block w-100" alt="1">
        <div class="carousel-caption">
            <h1>标题1</h1>
            <p>说明</p>
        </div>
    </div>
    <div class="carousel-item" data-interval="2000">
        <img src="./images/2.jpg" class="d-block w-100" alt="2">
        <div class="carousel-caption">
            <h1>标题2</h1>
            <p>说明</p>
        </div>
    </div>
    <div class="carousel-item" data-interval="3000">
        <img src="./images/3.jpg" class="d-block w-100" alt="3">
        <div class="carousel-caption">
            <h1>标题3</h1>
            <p>说明</p>
        </div>
    </div>
</div>

效果是切换数据间隔，截图也看不出效果，就不截图了。