当前位置: 首页 > news >正文

如何快速实现一个无缝轮播效果

🧑‍💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣

需求简介

轮播图是我们前端开发中的一个常见需求,在项目开发中,我们可以使用element、ant等UI库实现。某些场景,为了一个简单的功能安装一个库是没必要的,我们最好的选择就是手搓。
在这里插入图片描述
我们来看一个需求
在这里插入图片描述
上述需求核心就是实现一个无缝轮播的切换效果。以这个需求为例,我们看看最终实现效果:
在这里插入图片描述

实现思路

要想实现一个无缝的轮播效果,其实非常简单,核心思想就是动态改变显示的列表而已。比如我们有这样一个数组

const list = ref([{ name: 1, id: 1 }, { name: 2, id: 2 },{ name: 3, id: 3 }
])

如果我们想无缝切换的展示这个数据,最简单的代码就是动态的改变下面的代码的index

<template><div>{{ list[index] }}</div>
</template>
<script setup>const index = ref(0)const list = ref([{ name: 1, id: 1 }, { name: 2, id: 2 }, { name: 2, id: 2 }])
<scriptp>

那如何实现切换的样式呢?也非常简单,我们只要给元素添加一个出现样式和离开样式即可。现在,我们来具体实现这样一个需求。

技术方案

数据的动态切换

要想实现一个数据的动态循环切换效果,是非常容易的:

<template><div v-for="(build, index) in list" :key="index"><div v-show="index === selectIndex">卡片自定义内容</div></div>
</template>
<script setup>
const selectIndex = ref(0)
const list = ref([{ name: "卡片1", id: 1 }, { name: "卡片1", id: 2 }, { name: "卡片1", id: 2 }]
)// #计时器实例
let timer: any = null// >计时器逻辑
const timeFuc = () => {timer = setInterval(() => {// 更改选中的indexif (selectIndex.value >= list.value.length - 1) {selectIndex.value = 0} else {selectIndex.value++}}, 5000)
}timeFuc()
<scriptp>

上述代码中,我们设置了一个定时器,定时器每5s执行一次,每次执行都会动态更改当前要显示的数据索引值,当索引值达到最大实,在将其重置。通过上述的简单代码,我们就实现了一个可以自动切换的循环渲染的卡片。

动画添加

要想实现最终效果的动态效果也非常容易,我们只需要给每个元素出现时设置一些样式,离开时设置一些样式即可。借助vue的Transition组件,我们能很容易实现这样一个效果。

如果你不了解vue的Transition组件,请去官网补充下知识:cn.vuejs.org/guide/built…

<template>
<div class="main-content"><Transition v-for="(build, index) in list" :key="selectIndex"><div class="banner-scroll-wrap" v-show="index === selectIndex">卡片自定义内容</div></Transition>
</div>
</template>
<script setup>
const selectIndex = ref(0)
const list = ref([{ name: "卡片1", id: 1 }, { name: "卡片1", id: 2 }, { name: "卡片1", id: 2 }]
)// #计时器实例
let timer: any = null// >计时器逻辑
const timeFuc = () => {timer = setInterval(() => {// 更改选中的indexif (selectIndex.value >= list.value.length - 1) {selectIndex.value = 0} else {selectIndex.value++}}, 5000)
}timeFuc()
<scriptp>
<style lang="less" scoped>
.main-content {position: relative;height: 100%;.banner-scroll-wrap {position: absolute;top: 0;bottom: 0;right: 0;left: 0;}
}.v-enter-from {transform: translateX(100%);opacity: 0;
}.v-enter-active,
.v-leave-active {transition: transform 600ms ease-in-out, opacity 600ms ease-in-out;
}.v-enter-to {transform: translateX(0);opacity: 1;
}.v-leave-from {transform: translateX(0);opacity: 1;
}.v-leave-to {transform: translateX(-100%);opacity: 0;
}
<style/>

上述代码中,由于 selectIndex是动态的,元素不断地在显示与隐藏。因此,Transition标签的进入样式和离开样式会动态触发,从而形成切换效果。

v-enter是元素的进入样式,进入时,我们从最右边偏移100%的距离到正常位置,透明度从0到1,这个过程持续0.6s,实现了元素左移淡入的效果。

v-leave是元素的离开样式,离开时,我们从正常位置偏移到100%的左侧位置,透明度从1到0,这个过程持续0.6s,实现了元素左移淡出的效果。

在这些类的共同作用下,我们实现了元素的动态切换。
你可能注意到了我给元素设置了一个banner-scroll-wrap类名,并使用了position: absolute,这样设置的注意目的是保证切换离开元素的淡出效果和进入元素的淡入效果是连贯的。如果你不这样写,可能会出现样式问题。
此外,注意我给Transition设置了key=“Transition”,这样些会保证每次数据在切换时,transition能够重新渲染,触发元素离开和进入的样式。
至此,我们就完成了基本功能样式
在这里插入图片描述

轮播的停止与恢复

很常见的一种情况就是我们需要鼠标放在卡片上时停止轮播,离开卡片的时候恢复轮播,这非常容易。

<template>
<div class="main-content"  @mouseenter="stop()" @mouseleave="start()"><Transition v-for="(build, index) in list" :key="selectIndex"><div class="banner-scroll-wrap" v-show="index === selectIndex">卡片自定义内容</div></Transition>
</div>
</template>
<script setup>
const selectIndex = ref(0)
const list = ref([{ name: "卡片1", id: 1 }, { name: "卡片1", id: 2 }, { name: "卡片1", id: 2 }]
)// #计时器实例
let timer: any = null// >计时器逻辑
const timeFuc = () => {timer = setInterval(() => {// 更改选中的indexif (selectIndex.value >= list.value.length - 1) {selectIndex.value = 0} else {selectIndex.value++}}, 5000)
}// >开启轮播const start = () => {if (timer) returntimeFuc()}// >关闭轮播const stop = () => {clearInterval(timer)timer = null}timeFuc()
<scriptp>
<style lang="less" scoped>
<style/>

解决重影问题

在某些情况下,我们离开这个页面很久后(浏览器切换到其他选项卡),然后在切回来的时候,可能会出现短暂的画面重影问题,这个问题也很好解决,加上下面的代码即可

<script setup>//...// 解决切屏后重影的问题onMounted(() => {document.addEventListener('visibilitychange', () => {// 用户息屏、或者切到后台运行 (离开页面)if (document.visibilityState === 'hidden') {stop()}// 用户打开或回到页面if (document.visibilityState === 'visible') {start()}})})onBeforeUnmount(() => stop())<scriptp>

visibilitychange 事件:当其选项卡的内容变得可见或被隐藏时,会在 document 上触发 visibilitychange 事件。该事件不可取消。

总结

在本教程中,我们通过简单代码实现了无缝轮播效果,样式是左右切换,我们也可以通过样式控制实现上下切换的效果,比如将translateX设置为translateY即可。

 .v-enter-from {transform: translateY(100%);opacity: 0;
}

时间原因,本教程也没有对技术上做深究,也希望各位大佬能提供自己的思路与建议,感谢大家分享!

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
在这里插入图片描述

相关文章:

如何快速实现一个无缝轮播效果

&#x1f9d1;‍&#x1f4bb; 写在开头 点赞 收藏 学会&#x1f923;&#x1f923;&#x1f923; 需求简介 轮播图是我们前端开发中的一个常见需求&#xff0c;在项目开发中&#xff0c;我们可以使用element、ant等UI库实现。某些场景&#xff0c;为了一个简单的功能安装一…...

kubernetes集群证书过期问题解决

kubernetes集群证书过期问题解决 问题描述检查证书是否过期更新证书master节点操作node节点操作 问题描述 K8S 各个组件需要与 api-server 进行通信&#xff0c;通信使用的证书都存放在 /etc/kubernetes/pki 路径下&#xff0c;kubeadm 生成的证书大部分默认有效期为 1 年&…...

PHP框架详解-symfony框架

Symfony是一个使用PHP语言编写的开源Web应用框架&#xff0c;旨在加快开发进程&#xff0c;替代重复编码工作&#xff0c;并帮助构建可维护和可扩展的应用程序。以下是对Symfony框架的详细解析&#xff1a; 一、框架概述 Symfony提供了一组可重用的组件和一个标准化、可扩展的…...

Linux--线程的控制

目录 0.前言 1.pthread库 2.关于控制线程的接口 2.1.创建线程&#xff08;pthread_create&#xff09; 2.2.线程等待&#xff08;pthread_join&#xff09; 代码示例1&#xff1a; ​编辑 ***一些问题*** 2. 3.创建多线程 3.线程的终止 &#xff08;pthread_exit /…...

大数据------JavaWeb------会话跟踪技术(Cookie、Session)(完整知识点汇总)

会话跟踪技术&#xff08;Cookie&Session&#xff09; 注意&#xff1a; HTTP协议是无状态 的&#xff0c;即每次浏览器向服务器请求时&#xff0c;服务器都会将该请求视为新的请求&#xff0c;因此我们需要会话跟踪技术来实现会话内的数据共享 会话 当用户打开浏览器&am…...

crossJoin笛卡尔积

crossJoin笛卡尔积 在Spark中&#xff0c;crossJoin方法用于执行两个数据集之间的笛卡尔积操作。具体来说&#xff0c;如果有两个数据集&#xff08;DataFrame或Dataset&#xff09;&#xff0c;调用crossJoin方法将会生成一个新的数据集&#xff0c;其中包含两个原始数据集中所…...

Java客户端调用SOAP方式的WebService服务实现方式分析

简介 在多系统交互中&#xff0c;有时候需要以Java作为客户端来调用SOAP方式的WebService服务&#xff0c;本文通过分析不同的调用方式&#xff0c;以Demo的形式&#xff0c;帮助读者在生产实践中选择合适的调用方式。 本文JDK环境为JDK17。 结论 推荐使用Axis2或者Jaxws&#…...

华为机试真题--字符串序列判定

题目描述: 输入两个字符串S和L,都只包含英文小写字母,其中S长度<=100,L长度<=500000,请判定S是否是L的有效字串。 判定规则: S中的每个字符在L中都能找到(可以不连续),且S在L中字符的前后顺序与S中顺序要保持一致。(例如,S="ace"是L="abcd…...

Linux内核 -- 虚拟化之virtqueue结构

Linux Kernel中的Virtqueue Virtqueue是Linux Kernel中用于实现Virtio设备的一个关键数据结构。Virtio是一种虚拟I/O设备标准&#xff0c;旨在简化虚拟化环境中虚拟设备与虚拟机之间的通信。Virtqueue则是实现这种通信的核心机制。以下是Virtqueue的一些关键点&#xff1a; V…...

【pytorch18】Logistic Regression

回忆线性回归 for continuous:y xwbfor probability output:yσ(xwb) σ:sigmoid or logistic 线性回归是简单的线性模型&#xff0c;输入是x&#xff0c;网络参数是w和b&#xff0c;输出是连续的y的值 如何把它转化为分类问题?加了sigmoid函数&#xff0c;输出的值不再是…...

PostgreSQL的使用

PostgreSQL的使用 1.首先&#xff0c;使用docker进行安装pgvector数据库&#xff0c;具体的安装步骤可以查看我之前发的博文。 2.docker exec -it pgvector /bin/bash 进入docker容器内部&#xff0c;操作数据库&#xff0c;上述命令是以交互式命令进入了容器的内部&#xf…...

python 高级技巧 0706

python 33个高级用法技巧 列表推导式 简化了基于现有列表创建新列表的过程。 squares [x**2 for x in range(10)] print(squares)[0, 1, 4, 9, 16, 25, 36, 49, 64, 81]字典推导式 用简洁的方式创建字典。 square_dict {x: x**2 for x in range(10)} print(square_dict){0…...

面试经典 106. 从中序与后序遍历序列构造二叉树

最近小胖开始找工作了&#xff0c;又来刷苦逼的算法了 555 废话不多说&#xff0c;看这一题&#xff0c;上链接&#xff1a;https://leetcode.cn/problems/construct-binary-tree-from-inorder-and-postorder-traversal/description/?envTypestudy-plan-v2&envIdtop-inte…...

如何解决群晖Docker注册表查询失败/无法拉取镜像等问题

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 问题概述 📒📒 解决方案 📒🔖 方法一🔖 方法二🔖 方法三⚓️ 相关链接 🚓️📖 介绍 📖 在群晖(Synology)NAS设备上使用Docker时,我们可能会遇到查询Docker注册表失败,无法拉取Docker镜像的问题。这种情况…...

【Scrapy】 深入了解 Scrapy 中间件中的 process_spider_input 方法

准我快乐地重饰演某段美丽故事主人 饰演你旧年共寻梦的恋人 再去做没流着情泪的伊人 假装再有从前演过的戏份 重饰演某段美丽故事主人 饰演你旧年共寻梦的恋人 你纵是未明白仍夜深一人 穿起你那无言毛衣当跟你接近 &#x1f3b5; 陈慧娴《傻女》 Scrapy 是…...

数据库MySQL---基础篇

存储和管理数据的仓库 MySQL概述 数据库相关概念 数据库&#xff08;DataBase&#xff09;---数据存储的仓库&#xff0c;数据是有组织的进行存储 数据库管理系统&#xff08;DBMS&#xff09;-----操纵和管理数据库的大型软件 SQL----操作关系型数据库的编程语言&#xff…...

欧姆龙安全PLC及周边产品要点指南

电气安全、自动化设备作业安全&#xff0c;向来是非常非常之重要的&#xff01;越来越多的客户在规划新产线、改造既有产线的过程中&#xff0c;明确要求设计方和施工方将安全考虑进整体方案中进行考虑和报价&#xff01;作为一名自动化电气工程师&#xff0c;尤其是高级工程师…...

tableau气泡图与词云图绘制 - 8

气泡图及词云图绘制 1. 气泡图绘制1.1 选择相关属性字段1.2 选择气泡图1.3 设置颜色1.4 设置标签1.5 设置单位 2. 气泡图绘制 - 22.1 类别筛选2.2 页面年份获取2.3 行列获取2.4 历史轨迹显示 3. 词云图绘制3.1 筛选器3.2 选择相关属性3.3 选择气泡图3.4 设置类型颜色3.5 设置形…...

C语言 找出一个二维数组中的鞍点

找出一个二维数组中的鞍点,即该位置上的元素在该行上最大、在该列上最小。也可能没有鞍点。 #include <stdio.h>int main() {int matrix[4][4] {{10, 17, 13, 28},{21, 14, 16, 40},{30, 42, 23, 39},{24, 11, 19, 17}};int n 4, m 4;int found 0;for (int i 0; i …...

【笔记】在linux中设置错文件如何重置

以mysql的auto.cnf文件为例...

推荐一款微服务商城系统:技术栈新、全开源、好二开、运维还省心

一个开源商城&#xff0c;最怕的是什么&#xff1f;不是功能少&#xff0c;功能少可以慢慢加。不是文档烂&#xff0c;文档烂可以慢慢啃。最怕的是&#xff1a;你把系统拿到手&#xff0c;折腾了半天终于跑起来&#xff0c;结果发现核心代码是加密的&#xff0c;想改个支付逻辑…...

收藏!程序员/小白入门大模型必看,我的AI学习踩坑与正确路线分享

很多程序员和小白同学都私信我说&#xff0c;想入门AI、学习大模型&#xff0c;但始终找不到清晰的切入点&#xff0c;不知道该从哪里开始&#xff0c;也没有适合自己的学习路线。我深耕技术领域多年&#xff0c;从前端自学起步&#xff0c;后来转型学习AI与大模型&#xff0c;…...

EtherCAT模块化实战:如何为你的设备设计可热插拔的IO模块(基于SSC与0x4711示例)

EtherCAT模块化实战&#xff1a;如何为你的设备设计可热插拔的IO模块 在工业自动化领域&#xff0c;设备的灵活性和可扩展性正变得越来越重要。想象一下&#xff0c;当你的客户需要在生产线上快速更换不同类型的传感器或执行器时&#xff0c;如果每次硬件变更都需要重新配置整个…...

Python异步I/O终极调优手册(含strace+py-spy+asyncio debug mode三重追踪链路图)

第一章&#xff1a;Python异步I/O性能瓶颈的本质洞察Python的async/await语法虽大幅简化了异步编程模型&#xff0c;但其底层性能瓶颈并非源于语法糖本身&#xff0c;而根植于事件循环调度机制、GIL对CPU密集型任务的制约&#xff0c;以及I/O等待与协程切换之间的隐式开销。事件…...

QuickRecorder高效解决方案:从基础到进阶的macOS录屏全指南

QuickRecorder高效解决方案&#xff1a;从基础到进阶的macOS录屏全指南 【免费下载链接】QuickRecorder A lightweight screen recorder based on ScreenCapture Kit for macOS / 基于 ScreenCapture Kit 的轻量化多功能 macOS 录屏工具 项目地址: https://gitcode.com/GitHu…...

告别手动复制!用ArcGIS字段计算器(VB/Python)批量提取字段值的保姆级教程

ArcGIS字段计算器实战指南&#xff1a;VB与Python高效提取字段值的深度对比 在GIS数据处理工作中&#xff0c;属性表字段值的部分提取是最常见却又最耗时的操作之一。想象一下&#xff0c;当你面对一个包含上万条记录的"BSM"字段&#xff0c;需要提取前6位作为行政区…...

Java AI开发避坑!

文章目录一、当"龙虾"突然发狂二、解剖这场"史诗级翻车"第一刀&#xff1a;插件生态大迁徙第二刀&#xff1a;API 接口一锅端第三刀&#xff1a;安全沙箱锁死第四刀&#xff1a;目录结构洗牌三、Java 开发者的至暗时刻WebSocket 连接闪断MCP 适配器失效技能…...

信捷XD/XL系列PLC与C#通信实战:Modbus-RTU协议详解(附完整代码)

信捷XD/XL系列PLC与C#深度通信指南&#xff1a;从Modbus-RTU协议到工业级代码实现 在工业自动化领域&#xff0c;PLC与上位机的稳定通信是系统集成的核心环节。信捷XD/XL系列PLC凭借其出色的性价比和丰富的功能接口&#xff0c;已成为中小型自动化项目的热门选择。而C#作为.NET…...

Java全栈工程师的实战面试:从技术细节到业务场景

Java全栈工程师的实战面试&#xff1a;从技术细节到业务场景 一、面试开始 面试官&#xff08;微笑着&#xff09;&#xff1a;你好&#xff0c;很高兴见到你。我是负责技术面试的张工&#xff0c;今天我们会聊一些技术相关的问题。首先&#xff0c;请简单介绍一下你自己。 应聘…...

【AI重塑科研】无需通读全文,三步教你用大模型高效产出文献综述

1. 为什么你需要AI辅助文献综述&#xff1f; 每次打开文献库看到上百篇待读论文就头皮发麻&#xff1f;我完全理解这种感受。去年准备开题报告时&#xff0c;导师要求我两周内完成50篇核心文献的综述&#xff0c;当时差点崩溃。直到我发现用大模型处理文献可以节省90%的时间&am…...