程序员经验分享-hwhale

Bootstarp4 设计网页轮播组件

2023-11-17

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

 

目录

下载bootstrap4

轮播功能实现

简单实现轮播组件

增加标识图标

增加标题和说明

切换淡入淡出

设置数据间隔

总结

下载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>

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

总结

使用bootstrap来做轮播图，只需要按照固定格式，并设置相应封装好的类，js脚本都不用写，就可以很快的实现轮播图功能。如果网站要求不高，就直接使用三方来实现可以节省时间。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

html5

bootstrap

Bootstarp4 设计网页轮播组件 的相关文章

  • unity中mathf.Lerp的运用

    在unity3d中经常用线性插值函数Lerp 来在两者之间插值 两者之间可以是两个材质之间 两个向量之间 两个浮点数之间 两个颜色之间 其函数原型如下 1 Material Lerp 插值 function Lerp start Mater

  • 03目标检测-传统方法与深度学习算法对比

    一 目标学习的检测方法变迁及对比 目标检测 是当前计算机视觉和机器学习领域的研究热点 从Viola Jones Detector DPM等冷兵器时代的智慧到当今RCNN YOLO等深度学习土壤孕育下的GPU暴力美学 整个目标检测的发展可谓是

  • 在SpringBoot中使用百度AI，实现通用图片识别（身份证识别也通用）

    现在网上有好多第三方使用的文章 但是没几个是可以使用的 本片文章可以放心使用哦 3 1 先去百度ai官网注册一个账号 2 选择我们需要使用的功能 3 因为我们这个是测试使用 他每天会有很多次免费使用的次数 因此完全够用 4 去领取我们需要的

  • 结巴分词jieba添加自定义词典

    结巴分词添加自定义词典 有时候很有必要 比如下面这段话 test text 我们的健康码也是绿色的 这凭什么就限制我们的就医 如果使用默认的分词 那么 健康码 这个词会分成 健康 和 码 这里可以使用词典方式 添加自定义词典 新建一个txt

随机推荐

  • mysql写存储过程插入数据

    DROP PROCEDURE if exists insert emps test 下面就开始创建存储过程插入数据 DELIMITER 不加这个会报错 坑了我两个小时CREATE PROCEDURE insert emps test IN

  • C#分段读取超大文本文件

    一 概述 通过C 分段读取和操作超大内存的文本文件 保证操作大于3GB的txt时内存不会爆 包括获取txt文件总行数 按行分段等 二 操作流程 1 读取文件总行数 获取txt的总行数 public int GetTunnelInfos st

  • 【Qt&OpenCV 图像的形态学变换 morpholgyEx】

    腐蚀用于分割 isolate 独立的图像元素 膨胀用于连接 join 相邻的元素 腐蚀 膨胀可用于去噪 低尺寸结构元素的腐蚀操作很容易去掉分散的椒盐噪声点 图像轮廓提取 图像分割 寻找图像中的明显的极大值区域或极小值区域 高级形态学变换 开

  • react route和Switch的区别 +嵌套路由

    Router 指定路由规则 Router默认也是模糊匹配 Router的path可以不写 如果不写 表示该组件一定匹配 Switch 选择 开关 Switch中只有一个组件能匹配 只会显示第一个匹配的组件 exact 表示精确匹配

  • #QGIS源码官方编译指南

    QGIS源码官方编译指南 将QGIS官方的编译指南windows部分翻译一下 供大家参考 这个版本是QGIS源代码工程中2017年4月30日最后修改的版本 对应QGIS 2 99 也就是即将发布为QGIS 3 0的版本 翻译 Jacory

  • 计算机开机时间不对,为什么电脑每次开机时间都不对

    电脑是很智能的 一般情况下一开机电脑上面的时间就会自动校准 可有时候也会出现毛病 比如每次开机时间都不对 那么这是为什么呢 windows电脑 电脑时间不准的原因有 1 主板电池没电 2 有病毒 3 主板出问题 对应的解决方法 1 更换主板

  • 2023华为OD机试真题Java实现【寻找最大价值的矿堆/深度优先搜索】

    前言 本题使用Java实现 如果需要Python代码 请点击以下链接 点我 题目 我们规定 0表示空地 1表示银矿 2表示金矿 矿堆表示由相邻的金矿或银矿连接形成的地图 银矿价值是1 金矿价值是2 你的目标是找出地图中最大价值的矿堆 并且输

  • react页面渲染之前_React 单页面初始化渲染优化

    由于项目使用 React React Router Redux 来开发项目 采取了前端渲染的方式 如果采用 ssr 就不会有这个问题 问题 所以每到一个页面 需要发一个初始化的请求来获取页面数据 然后重新渲染页面 所以之前一个页面从请求到加

  • PP-YOLOE的译读笔记

    PP YOLOE An evolved version of YOLO 摘要 本文介绍了PP YOLOE模型 一种SOTA的产业级目标检测器 具有性能高效和部署友好的特点 本文在之前的PP YOLOv2的基础上进行优化 使用了anchor

  • linux如何脚本监控tps,Linux性能监控分析命令（三）—iostat命令介绍

    性能监控分析的命令包括如下 1 vmstat 2 sar 3 iostat 4 top 5 free 6 uptime 7 netstat 8 ps 9 strace 10 lsof 命令介绍 iostat是对系统的磁盘I O操作进行监控

  • vs中nuget包引用感叹号解决

    移除其中一个包引用 然后重新再nuget中搜索 然后在添加进来 其他的有感叹号的nuget包引用也自动刷新包了 就解决了

  • +-字符串（简单贪心）

    字符串 时间限制 1000 ms 内存限制 65535 KB 难度 1 描述 Shiva得到了两个只有加号和减号的字符串 字串长度相同 Shiva一次可以把一个加号和它相邻的减号交换 他想知道最少需要多少次操作才能把第一个字符串变换成第二个

  • python 安装第三方库imblearn

    首先把自己的numpy scikit learn scipy卸载掉 然后执行 pip install imblearn i http pypi douban com simple trusted host pypi douban com 如

  • MySQL学习笔记

    文章目录 一 数据库概述及数据准备 SQL DB DBMS 表 table SQL语句分类 导入数据 查看表结构 查看表中的数据 二 常用命令 查看MySQL版本 创建数据库 查询当前使用的数据库

  • ChatGPT/InstructGPT详解

    前言 GPT系列是OpenAI的一系列预训练文章 GPT的全称是Generative Pre Trained Transformer 顾名思义 GPT的目的就是通过Transformer为基础模型 使用预训练技术得到通用的文本模型 目前已经

  • sublime主题配色

    ignored packages Vintage theme Default Dark sublime theme dark theme Default sublime theme light theme Adaptive sublime

  • 【华为OD机试】生日礼物【2023 B卷

    华为OD机试 真题 点这里 华为OD机试 真题考点分类 点这里 题目描述 小牛的孩子生日快要到了 他打算给孩子买蛋糕和小礼物 蛋糕和小礼物各买一个 他的预算不超过x元 蛋糕cake和小礼物gift都有多种价位的可供选择 请返回小牛共有多少种

  • 【vue3】watchEffect只监听一次的方法

    import watchEffect from vue let data ref watchEffect gt console log data value 要利用data value执行的操作 而且还必须在watchEffect里面执行

  • 记录错误：con not perform the following tasks

    Ubuntu系统下安装软件出现报错 con not perform the following tasks TOC 检查软件源 实在不行改为国内源 或者等待网络再次下载

  • Bootstarp4 设计网页轮播组件

    很多网站都有广告轮播功能 可使用bootstrap4中的carousel组件非常简单的实现 目录 下载bootstrap4 轮播功能实现 简单实现轮播组件 增加标识图标 增加标题和说明 切换淡入淡出 设置数据间隔 总结 下载bootstra

热门标签