文章目录

  • 一、轮播图整体功能规划
  • 二、HTML结构深度解析
  • 三、CSS样式实现细节
    • 1. 定位系统详解
    • 2. 显示/隐藏机制
    • 3. 按钮交互效果实现
    • 4. 纯CSS箭头实现
    • 5. 指示器：当前位置可视化
  • 四、JavaScript逻辑深入解析
    • 1. 核心变量与DOM获取
    • 2. 图片切换函数（核心逻辑）
    • 3. 前后切换函数（边界处理）
    • 4. 自动播放控制
    • 5. 指示器完整交互
    • 6. 事件绑定与初始化

轮播图作为前端开发中的经典组件，广泛应用于网站首页、产品展示等场景。它不仅能在有限空间内展示多张图片，还能通过动态效果提升用户体验。本文将从结构设计、样式实现到交互逻辑，详细讲解如何从零构建一个功能完善的轮播图。

轮播图实现效果：

轮播图

一、轮播图整体功能规划

在开始编码前，我们需要明确轮播图的核心功能：

  • 自动播放：图片按固定时间间隔自动切换
  • 手动切换：通过左右按钮控制图片切换
  • 指示器导航：底部小圆点显示当前位置，点击可快速跳转到对应图片
  • 交互反馈：鼠标悬停时暂停自动播放，显示操作按钮；离开时恢复自动播放
  • 平滑过渡：图片切换时使用动画效果，避免生硬跳转

二、HTML结构深度解析

轮播图的HTML结构看似简单，实则蕴含了清晰的层次设计：

<div class="box"><!-- 图片容器组 --><div class="box-img"><img src="img/albumFolklore.jpg"> </div><div class="box-img"><img src="img/albumST.jpg"> </div><div class="box-img"><img src="img/albumSpring.jpg" > </div><div class="box-img"><img src="img/albumNTM.jpg"> </div> <!-- 控制按钮 --><div class="left"> </div><div class="right"> </div><!-- 指示器 --><div class="dot"><ul id="dot-list"><li class="active" data-index="0"></li><li data-index="1"></li><li data-index="2"></li><li data-index="3"></li></ul></div>
</div>

结构设计考量：

  • 为什么使用.box-img包裹图片而非直接操作img标签？

    • 便于统一控制图片容器的显示状态（opacity）
    • 为后续可能的图片加载动画预留空间
    • 可以在不修改图片本身的情况下添加过渡效果

  • 指示器为什么使用data-index属性？

    • 建立指示器与图片的一一对应关系
    • 无需通过复杂计算获取索引，直接从DOM中读取
    • 提高代码可读性和可维护性

三、CSS样式实现细节

1. 定位系统详解

.box{position: relative;
}
.box-img img{position: absolute;top: 0;left: 0;
}

这是轮播图实现的核心基础，通过定位系统实现了"多图叠加"效果：

  • .box设置position: relative后，成为了所有子元素的"定位上下文"
  • 所有图片设置position: absolute并top: 0; left: 0，使它们都从容器左上角开始定位
  • 最终效果是所有图片在视觉上重叠在一起，为后续的显示/隐藏切换奠定基础

2. 显示/隐藏机制

.box-img{opacity: 0;transition: opacity 0.5s ease-in-out;
}
.box-img:nth-child(1){opacity: 1;
}

为什么选择opacity而不是其他方案？

  • 方案对比：

    • display: none：完全移除元素，无法实现过渡动画
    • visibility: hidden：元素仍占据空间，且过渡效果有限
    • opacity: 0：元素仍存在于页面中（可响应事件），支持平滑过渡

  • transition属性详解：

    • ease-in-out：缓动函数（开始和结束时较慢，中间较快）

3. 按钮交互效果实现

按钮设置了三种状态:

  1. 鼠标移出盒子时隐藏
  2. 鼠标移入盒子但未移入按钮为浅灰色
  3. 鼠标移入按钮为深灰色

按钮演示

.left,.right{position: absolute;top: 225px; /* 垂直居中 */transform: translateY(-50%); /* 精确居中 */width: 35px;height: 35px;display: flex; /* 确保后面::before伪元素选择器起作用 *//*使箭头位于圆中心*/align-items: center;justify-content: center;border-radius: 50%; /* 圆形按钮 */z-index: 10; /* 确保在图片上方 */cursor: pointer; /* 鼠标悬停显示手型 */opacity: 0; /*隐藏*/background-color: rgba(0,0,0,0.2);/* 浅灰 */color: white;/*箭头颜色*/transition: all 0.3s ease; /* 按钮自身的动画效果 */
}/* 鼠标悬停盒子时显示按钮 */
.box:hover .left, .box:hover .right{opacity:1; /*显示按钮*/
}.left{left: 10px;
}
.right{right: 10px;
}

这是一个典型的"条件显示"交互模式：

  • 默认状态下按钮隐藏（opacity：0）
  • 当鼠标悬停在容器上时（.box:hover），通过后代选择器激活按钮显示状态
  • transform: translateY(-50%)确保按钮在垂直方向上精确居中

4. 纯CSS箭头实现

.left::before, .right::before{content: '';width: 12px;height: 12px;border-top: 2px solid white;border-left: 2px solid white;
}
.left::before{transform: translateX(2px) rotate(-45deg);
}
.right::before{transform: translateX(-2px) rotate(135deg);
}

这是一种无需图片的箭头实现方案：

  • 使用::before伪元素创建一个正方形元素
  • 通过border-top和border-left绘制两条边（模拟箭头的两条边）
  • 利用rotate旋转实现箭头方向：
    • 左箭头：旋转-45度
    • 右箭头：旋转135度（相当于-225度）
  • 微调translateX使箭头视觉上居中

优点： 减少HTTP请求、易于修改颜色和大小、缩放不失真

5. 指示器：当前位置可视化

指示器演示

.dot{position: absolute;bottom: 15px;right: 70px; /* 定位在右下角 */
}.dot ul li{width: 10px;height: 10px;border-radius: 100%; /* 圆形指示器 */background-color: #737171;float: left;margin-right: 15px;cursor: pointer;transition: all 0.3s ease; /* 状态变化动画 */
}/* 指示器交互效果 */
.dot ul li.active{background-color: #ffffff;transform: scale(1.4); /* 当前项更大 */box-shadow: 0 0 8px rgba(255,255,255,0.8); /* 高亮效果 */
}

指示器作用：

  • 直观显示当前是第几张图片及总数量
  • 点击可快速跳转到对应图片
  • 通过active类区分当前选中状态

四、JavaScript逻辑深入解析

1. 核心变量与DOM获取

// 获取 DOM元素
const imgs = document.querySelectorAll('.box-img');
const prevB = document.querySelector(".left");
const nextB = document.querySelector('.right');
const dots = document.getElementById('dot-list').querySelectorAll('li');// 状态变量
let currentIndex = 0;
const imgCnt = imgs.length;
let autoTimer = null;

变量作用详解：

  • imgs：获取所有图片容器的集合（NodeList），便于批量操作
  • currentIndex：当前显示图片的索引，是整个轮播逻辑的"状态核心"
  • imgCnt：存储图片总数，避免重复计算imgs.length
  • autoTimer：存储计时器ID，用于控制自动播放的开启与关闭

2. 图片切换函数（核心逻辑）

function switchToImg(index) {// 隐藏所有图片imgs.forEach( img => {img.style.opacity = 0;});// 显示目标图片imgs[index].style.opacity=1;// 更新当前索引currentIndex = index;// 更新指示器状态dots.forEach(dot => {dot.classList.remove('active');});dots[index].classList.add('active')
}

这个函数是轮播图的"心脏"，负责完成一次完整的图片切换：

执行步骤分解：

  1. 遍历所有图片容器，将它们的透明度设为0（隐藏）
  2. 将目标索引对应的图片容器透明度设为1（显示）
    • 此时会触发CSS中定义的transition动画，实现淡入效果
  3. 更新currentIndex为当前索引，保持状态同步
  4. 更新指示器状态：
    • 先移除所有指示器的active类
    • 再给当前索引对应的指示器添加active类
    • 这会触发指示器的CSS状态变化（颜色、大小等）

3. 前后切换函数（边界处理）

// 向左切换
function prevImg(){currentIndex = (currentIndex - 1 + imgCnt) % imgCnt;switchToImg(currentIndex);
}// 向右切换
function nextImg(){currentIndex = (currentIndex + 1) % imgCnt;switchToImg(currentIndex);
}

这两个函数解决了轮播图的"循环切换"问题，关键在于边界处理：

  • 向右切换逻辑：

    • 正常情况：索引+1（如从0→1，1→2）
    • 边界情况：当索引是最后一张（3）时，+1后应该变为0
    • 实现：(currentIndex + 1) % imgCnt，利用取模运算自动回绕

  • 向左切换逻辑：

    • 正常情况：索引-1（如从2→1，1→0）
    • 边界情况：当索引是0时，-1后应该变为最后一张（3）
    • 实现：(currentIndex - 1 + imgCnt) % imgCnt
    • 加imgCnt是为了避免出现负数（如0-1=-1，+4=3，再取模仍为3）

4. 自动播放控制

// 开始自动播放
function startAutoPlay(){stopAutoPlay();autoTimer = setInterval(nextImg, 3000);
}// 停止自动播放
function stopAutoPlay(){clearInterval(autoTimer);
}

自动播放功能的实现关键点：

  • 为什么在startAutoPlay中先调用stopAutoPlay？

    • 防止多次调用startAutoPlay导致创建多个计时器
    • 确保每次开始自动播放前都清除了之前的计时器
    • 避免轮播速度越来越快的问题

  • 时间间隔选择：3000ms（3秒）是一个平衡用户浏览和交互的常用值

    • 太短：用户来不及看清内容
    • 太长：轮播效果不明显

5. 指示器完整交互

function initDots(){dots.forEach((dot,index) => {// 点击事件dot.addEventListener('click',() => {switchToImg(index);startAutoPlay();});// 鼠标移入事件dot.addEventListener('mouseenter',() => {switchToImg(index);stopAutoPlay();});// 鼠标离开事件dot.addEventListener('mouseleave', startAutoPlay);// 设置数据索引dot.setAttribute('data-index',index);});dots[0].classList.add('active');
}

指示器实现了三种交互方式，提升用户体验：

  • 点击交互：

    • 直接跳转到对应图片（调用switchToImg(index)）
    • 跳转后重新开始自动播放计时（startAutoPlay()）

  • 悬停交互：

    • 鼠标移入时跳转到对应图片并暂停自动播放
    • 鼠标离开时恢复自动播放
    • 这种设计允许用户仔细查看某张图片，提升浏览体验

  • 初始化：确保页面加载时第一个指示器处于激活状态

6. 事件绑定与初始化

// 按钮点击事件
prevB.addEventListener('click',() => {prevImg();startAutoPlay();
});
nextB.addEventListener('click',() => {nextImg();startAutoPlay();
});// 容器悬停事件
const box = document.querySelector('.box');
box.addEventListener('mouseenter', stopAutoPlay);
box.addEventListener('mouseleave', startAutoPlay);// 初始化执行
initDots();
startAutoPlay();

事件绑定将所有功能串联起来，形成完整的交互闭环：

  • 按钮点击：

    • 点击后切换图片
    • 同时重启自动播放计时器（避免手动操作后立即自动切换）

  • 容器悬停：

    • 鼠标进入容器时暂停自动播放（方便用户查看当前图片）
    • 鼠标离开容器时恢复自动播放
    • 这个设计优先考虑了用户主动浏览的需求

  • 初始化流程：

    1. 先初始化指示器（initDots()）
    2. 再启动自动播放（startAutoPlay()）
    3. 确保页面加载完成后轮播图即可正常工作

声明：源码是本人的部分期末作业，以初学者的角度思考问题，代码相对实际开发还欠缺优化，仅仅为初学者提供思路，欢迎大佬提出优化意见。

源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 1000px;height: 500px;position: relative;margin: 15px auto;}.box-img img{width: 1000px;height: 500px;position: absolute;top: 0;left: 0;}.box-img{opacity: 0;transition: opacity 0.5s ease-in-out;}.box-img:nth-child(1){opacity: 1;}.left,.right{opacity: 0;position: absolute;transform: translateY(-50%);top: 225px;width: 35px;height: 35px;align-items: center;justify-content: center;border-radius: 50%;z-index: 10;cursor: pointer;background-color: rgba(0,0,0,0.2);color: white;font-size: 24px;transition: all 0.3s ease; /* 按钮自身的动画效果 */display: flex;}.box:hover .left, .box:hover .right{opacity: 1;}.left{left: 10px;}.right{right: 10px;}.left::before, .right::before{content: '';width: 12px;height: 12px;border-top: 2px solid white;border-left: 2px solid white;}.left::before{transform: translateX(2px) rotate(-45deg);}.right::before{transform: translateX(-2px) rotate(135deg);}.left:hover, .right:hover{background-color: rgba(0,0,0,0.7);transform: translateY(-50%) scale(1.1);opacity: 1; box-shadow: 0 0 15px rgba(255,255,255,0.3);}.dot{position: absolute;bottom: 15px;right: 70px;}.dot ul{padding: 0;margin: 0;list-style: none;}.dot ul li{width: 10px;height: 10px;border-radius: 100%;background-color: #737171;float: left;margin-right: 15px;cursor: pointer;transition: all 0.3s ease;}.dot ul li.active{background-color: #ffffff;transform: scale(1.4);box-shadow: 0 0 8px rgba(255,255,255,0.8);}</style>
</head>
<body>
<div class="box"><!-- 轮播图片容器 --><div class="box-img"><img src="img/albumFolklore.jpg"> </div><div class="box-img"><img src="img/albumST.jpg"> </div><div class="box-img"><img src="img/albumSpring.jpg" > </div><div class="box-img"><img src="img/albumNTM.jpg"> </div> <!-- 左右切换按钮 --><div class="left"> </div><div class="right"> </div><!-- 指示器（小圆点） --><div class="dot"><ul id="dot-list"><li class="active" data-index="0"></li><li data-index="1"></li><li data-index="2"></li><li data-index="3"></li></ul></div></div>
<script>
const imgs = document.querySelectorAll('.box-img');
const prevB = document.querySelector(".left");
const nextB = document.querySelector('.right');
const dots = document.getElementById('dot-list').querySelectorAll('li');let currentIndex = 0;
const imgCnt = imgs.length;//初始化
function initDots(){dots.forEach((dot,index) => {//点击dot.addEventListener('click',() => {switchToImg(index);startAutoPlay();});//移入dot.addEventListener('mouseenter',() => {switchToImg(index);stopAutoPlay();})//离开dot.addEventListener('mouseleave',startAutoPlay);dot.setAttribute('data-index',index)});dots[0].classList.add('active');
}//切换
function switchToImg(index) {imgs.forEach( img => {img.style.opacity = 0;});imgs[index].style.opacity=1;currentIndex = index;dots.forEach(dot => {dot.classList.remove('active');});dots[index].classList.add('active')
}//向左切换
function prevImg(){currentIndex = (currentIndex - 1 + imgCnt) % imgCnt;switchToImg(currentIndex);
}//向右切换
function nextImg(){currentIndex = (currentIndex + 1) % imgCnt;switchToImg(currentIndex);
}//计时器
let autoTimer = null;
function startAutoPlay(){stopAutoPlay();autoTimer = setInterval(nextImg,3000);
}function stopAutoPlay(){clearInterval(autoTimer);
}//事件绑定
prevB.addEventListener('click',() => {prevImg();startAutoPlay();
});
nextB.addEventListener('click',() => {nextImg();startAutoPlay();
});initDots();
startAutoPlay();const box = document.querySelector('.box');
box.addEventListener('mouseenter',stopAutoPlay);
box.addEventListener('mouseleave',startAutoPlay);
</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/bicheng/94046.shtml
繁体地址，请注明出处：http://hk.pswp.cn/bicheng/94046.shtml
英文地址，请注明出处：http://en.pswp.cn/bicheng/94046.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

机器学习--PCA降维

机器学习--PCA降维

一核心部分 1解决的问题&#xff1a;应对高维数据带来的计算量大、冗余信息多、易出现过拟合等问题&#xff0c;在减少数据维度的同时尽可能保留原始数据的关键信息。2核心思想&#xff1a…
阅读更多...
leetcode 1277. 统计全为 1 的正方形子矩阵 中等

leetcode 1277. 统计全为 1 的正方形子矩阵 中等

给你一个 m * n 的矩阵&#xff0c;矩阵中的元素不是 0 就是 1&#xff0c;请你统计并返回其中完全由 1 组成的 正方形 子矩阵的个数。示例 1&#xff1a;输入&#xff1a;matrix [[0,1,1,1],[1,1,1,1],[0,1,1,1] ] 输出&#xff1a;15 解释&#xff1a; 边长为 1 的正方形有…
阅读更多...
知识蒸馏 - 各类概率分布

知识蒸馏 - 各类概率分布

知识蒸馏 - 各类概率分布 flyfish一、离散概率分布 离散分布描述的是取值为离散值&#xff08;如0,1,2,…&#xff09;的随机变量的概率规律&#xff0c;通常用概率质量函数&#xff08;PMF&#xff09; 表示某一取值的概率。 1. 伯努利分布&#xff08;Bernoulli Distribution…
阅读更多...
软件测试-Selenium学习笔记

软件测试-Selenium学习笔记

""" 目标&#xff1a; driver.find_element() 需求&#xff1a; 1. 使用driver.find_element()方法 2. 输入用户名&#xff1a;admin 3. 输入密码&#xff1a;123456 """ # 导包 from selenium import webdriver from time import …
阅读更多...
知微传感3D相机上位机DkamViewer使用：给相机升级固件

知微传感3D相机上位机DkamViewer使用：给相机升级固件

写在前面 本人从事机器视觉细分的3D相机行业。编写此系列文章主要目的有&#xff1a; 1、便利他人应用相机&#xff0c;本系列文章包含公司所出售相机的SDK的使用例程及详细注释&#xff1b;2、促进行业发展及交流。 知微传感Dkam系列3D相机可以应用于定位分拣、焊接焊缝提取、…
阅读更多...
CMake进阶: CMake Modules---简化CMake配置的利器

CMake进阶: CMake Modules---简化CMake配置的利器

目录 1.简介 2.为什么需要 CMake Modules&#xff1f; 3.内置模块&#xff1a;开箱即用的工具 3.1.依赖查找模块&#xff08;FindXXX.cmake&#xff09; 3.2.功能检测模块&#xff08;CheckXXX.cmake&#xff09; 3.3.通用工具模块&#xff08;如 FetchContent.cmake、CT…
阅读更多...
【Docker】Ubuntu上安装Docker（网络版）

【Docker】Ubuntu上安装Docker（网络版）

【Docker】Ubuntu上安装Docker注意&#xff1a;一、环境准备1. 系统要求2. 卸载旧版本二、安装步骤1.配置仓库源2.安装 Docker引擎3.验证安装情况三、解决报错1、检查网络连接2、检查Docker服务状态3、换源4.重载生效、重启服务、查看是否配置成功5.验证解决情况四、权限与配置…
阅读更多...
Socket 编程 TCP

Socket 编程 TCP

TCP 网络程序 和刚才 UDP 类似. 实现一个简单的英译汉的功能。TCP是面向字节流的可靠传输&#xff0c;如同前文的管道流&#xff0c;只要是流&#xff0c;它的操作就是文件的写出与读入。TCP socket API 详解下面介绍程序中用到的 socket API,这些函数都在 sys/socket.h 中。so…
阅读更多...
使用AWS S3 + Lambda + MediaConvert 实现上传视频文件并自动转码

使用AWS S3 + Lambda + MediaConvert 实现上传视频文件并自动转码

前言 最近团队在做短视频平台的技术调研&#xff0c;其中有一个环节便是音视频开发&#xff0c;即对用户上传的视频进行自适应转码。自适应的原理其实就是预先将视频转换为几个常用的分辨率&#xff0c;app端根据用户手机分辨率拉取相应分辨率的视频。 目前尝试了两种方案&…
阅读更多...
QT之QWaitCondition降低cpu占用率，从忙等待到高效同步

QT之QWaitCondition降低cpu占用率，从忙等待到高效同步

在多线程编程中&#xff0c;线程间的同步是一个核心问题。在处理线程等待时&#xff0c;经常会写出高CPU占用率的代码&#xff0c;其中最典型的就是使用忙等待&#xff08;busy waiting&#xff09;。本文将详细介绍如何使用Qt框架中的QWaitCondition类来优雅地解决这一问题&am…
阅读更多...
pcl求平面点云的边界凸包点

pcl求平面点云的边界凸包点

基本流程1&#xff0c;读入点云&#xff0c;并去除无效点2&#xff0c;拟合平面3&#xff0c;去除离平面距离较远的点4&#xff0c;对点云进行平面投影5&#xff0c;进行convex_hull运算初学者&#xff0c;暂时不知道能用来干嘛。练手还是非常不错的&#xff01;#define _CRT_S…
阅读更多...
Windows系统上使用GIT

Windows系统上使用GIT

首先破除一下畏惧心理&#xff1a;在Windows上使用git和在linux系统中的使用方法是一样的&#xff0c;只是安装方式没那么便捷&#xff0c;毕竟linux中安装git只需要一行命令 GIT下载地址 如果你的电脑的CPU是64位的&#xff0c;就点击&#xff1a; Git-2.50.1-64-bit.exe 如果…
阅读更多...
《设计模式之禅》笔记摘录 - 17.模板方法模式

《设计模式之禅》笔记摘录 - 17.模板方法模式

模板方法模式的定义模板方法模式(Template Method Pattern)是如此简单&#xff0c;以致让你感觉你已经能够掌握其精髓了。其定义如下&#xff1a;Define the skeleton of an algorithm in an operation, deferring some steps to subclasses.Template Method lets subclasses r…
阅读更多...
SpreadJS 协同服务器 MongoDB 数据库适配支持

SpreadJS 协同服务器 MongoDB 数据库适配支持

为了支持 SpreadJS 协同编辑场景&#xff0c;协同服务器需要持久化存储文档、操作、快照及里程碑数据。本文介绍了 MongoDB 数据库适配器的实现方法&#xff0c;包括集合初始化、适配器接口实现以及里程碑存储支持。 一、MongoDB 集合初始化 协同编辑服务需要以下集合&#x…
阅读更多...
Ubuntu 主机名：精通配置与管理

Ubuntu 主机名：精通配置与管理

主机名&#xff08;hostname&#xff09;是Linux系统中用于标识网络上特定设备的名称&#xff0c;它在网络通信、服务配置&#xff08;如 Kubernetes 集群、数据库&#xff09;以及日志记录中扮演着至关重要的角色。对于初学者来说&#xff0c;配置主机名似乎很简单&#xff0c…
阅读更多...
C/C++ 协程：Stackful 手动控制的工程必然性

C/C++ 协程：Stackful 手动控制的工程必然性

&#x1f680; C/C 协程&#xff1a;Stackful 手动控制的工程必然性 引用&#xff1a; C/C 如何正确的切换协同程序&#xff1f;&#xff08;基于协程的并行架构&#xff09; #mermaid-svg-SXgplRf3WRYc8A7l {font-family:"trebuchet ms",verdana,arial,sans-serif;…
阅读更多...
新手向：使用STM32通过RS485通信接口控制步进电机

新手向：使用STM32通过RS485通信接口控制步进电机

新手向&#xff1a;使用STM32通过RS485通信接口控制步进电机 准备工作 本文使用的STM32芯片是STM32F407ZGTx&#xff0c;使用的电机是57步进电机&#xff0c;驱动器是用的是时代超群的RS485总线一体化步进电机驱动器&#xff08;42 型&#xff1a;ZD-M42P-485&#xff09;。使…
阅读更多...
设计模式笔记_行为型_命令模式

设计模式笔记_行为型_命令模式

1.命令模式介绍命令模式&#xff08;Command Pattern&#xff09;是一种行为设计模式&#xff0c;它将请求或操作封装为对象&#xff0c;使得可以用不同的请求对客户端进行参数化。命令模式的核心思想是将方法调用、请求或操作封装到一个独立的命令对象中&#xff0c;从而使得客…
阅读更多...
详解MySQL中的多表查询：多表查询分类讲解、七种JOIN操作的实现

详解MySQL中的多表查询：多表查询分类讲解、七种JOIN操作的实现

精选专栏链接 &#x1f517; MySQL技术笔记专栏Redis技术笔记专栏大模型搭建专栏Python学习笔记专栏深度学习算法专栏 欢迎订阅&#xff0c;点赞&#xff0b;关注&#xff0c;每日精进1%&#xff0c;与百万开发者共攀技术珠峰 更多内容持续更新中&#xff01;希望能给大家带来…
阅读更多...
vue3+elemeent-plus, el-tooltip的样式修改不生效

vue3+elemeent-plus, el-tooltip的样式修改不生效

修改后的样式&#xff0c;直接贴图&#xff0c;经过删除出现悬浮1、在书写代码的时候切记effect“light”&#xff0c;如果你需要的是深色的样式:disabled"!multiple" 是否禁用<el-tooltip effect"light" placement"top" content"请先选…
阅读更多...
最新文章

Copyright @ 2022~2023