如何快速实现一个无缝轮播效果
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
需求简介
轮播图是我们前端开发中的一个常见需求,在项目开发中,我们可以使用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;
}
时间原因,本教程也没有对技术上做深究,也希望各位大佬能提供自己的思路与建议,感谢大家分享!
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

相关文章:
如何快速实现一个无缝轮播效果
🧑💻 写在开头 点赞 收藏 学会🤣🤣🤣 需求简介 轮播图是我们前端开发中的一个常见需求,在项目开发中,我们可以使用element、ant等UI库实现。某些场景,为了一个简单的功能安装一…...
kubernetes集群证书过期问题解决
kubernetes集群证书过期问题解决 问题描述检查证书是否过期更新证书master节点操作node节点操作 问题描述 K8S 各个组件需要与 api-server 进行通信,通信使用的证书都存放在 /etc/kubernetes/pki 路径下,kubeadm 生成的证书大部分默认有效期为 1 年&…...
PHP框架详解-symfony框架
Symfony是一个使用PHP语言编写的开源Web应用框架,旨在加快开发进程,替代重复编码工作,并帮助构建可维护和可扩展的应用程序。以下是对Symfony框架的详细解析: 一、框架概述 Symfony提供了一组可重用的组件和一个标准化、可扩展的…...
Linux--线程的控制
目录 0.前言 1.pthread库 2.关于控制线程的接口 2.1.创建线程(pthread_create) 2.2.线程等待(pthread_join) 代码示例1: 编辑 ***一些问题*** 2. 3.创建多线程 3.线程的终止 (pthread_exit /…...
大数据------JavaWeb------会话跟踪技术(Cookie、Session)(完整知识点汇总)
会话跟踪技术(Cookie&Session) 注意: HTTP协议是无状态 的,即每次浏览器向服务器请求时,服务器都会将该请求视为新的请求,因此我们需要会话跟踪技术来实现会话内的数据共享 会话 当用户打开浏览器&am…...
crossJoin笛卡尔积
crossJoin笛卡尔积 在Spark中,crossJoin方法用于执行两个数据集之间的笛卡尔积操作。具体来说,如果有两个数据集(DataFrame或Dataset),调用crossJoin方法将会生成一个新的数据集,其中包含两个原始数据集中所…...
Java客户端调用SOAP方式的WebService服务实现方式分析
简介 在多系统交互中,有时候需要以Java作为客户端来调用SOAP方式的WebService服务,本文通过分析不同的调用方式,以Demo的形式,帮助读者在生产实践中选择合适的调用方式。 本文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设备标准,旨在简化虚拟化环境中虚拟设备与虚拟机之间的通信。Virtqueue则是实现这种通信的核心机制。以下是Virtqueue的一些关键点: V…...
【pytorch18】Logistic Regression
回忆线性回归 for continuous:y xwbfor probability output:yσ(xwb) σ:sigmoid or logistic 线性回归是简单的线性模型,输入是x,网络参数是w和b,输出是连续的y的值 如何把它转化为分类问题?加了sigmoid函数,输出的值不再是…...
PostgreSQL的使用
PostgreSQL的使用 1.首先,使用docker进行安装pgvector数据库,具体的安装步骤可以查看我之前发的博文。 2.docker exec -it pgvector /bin/bash 进入docker容器内部,操作数据库,上述命令是以交互式命令进入了容器的内部…...
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. 从中序与后序遍历序列构造二叉树
最近小胖开始找工作了,又来刷苦逼的算法了 555 废话不多说,看这一题,上链接: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 方法
准我快乐地重饰演某段美丽故事主人 饰演你旧年共寻梦的恋人 再去做没流着情泪的伊人 假装再有从前演过的戏份 重饰演某段美丽故事主人 饰演你旧年共寻梦的恋人 你纵是未明白仍夜深一人 穿起你那无言毛衣当跟你接近 🎵 陈慧娴《傻女》 Scrapy 是…...
数据库MySQL---基础篇
存储和管理数据的仓库 MySQL概述 数据库相关概念 数据库(DataBase)---数据存储的仓库,数据是有组织的进行存储 数据库管理系统(DBMS)-----操纵和管理数据库的大型软件 SQL----操作关系型数据库的编程语言ÿ…...
欧姆龙安全PLC及周边产品要点指南
电气安全、自动化设备作业安全,向来是非常非常之重要的!越来越多的客户在规划新产线、改造既有产线的过程中,明确要求设计方和施工方将安全考虑进整体方案中进行考虑和报价!作为一名自动化电气工程师,尤其是高级工程师…...
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文件为例...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...
网络编程(UDP编程)
思维导图 UDP基础编程(单播) 1.流程图 服务器:短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama(有网络的电脑)2.2.3 安装Ollama(无网络的电脑)2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
云原生安全实战:API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关(API Gateway) API网关是微服务架构中的核心组件,负责统一管理所有API的流量入口。它像一座…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时,显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
宇树科技,改名了!
提到国内具身智能和机器人领域的代表企业,那宇树科技(Unitree)必须名列其榜。 最近,宇树科技的一项新变动消息在业界引发了不少关注和讨论,即: 宇树向其合作伙伴发布了一封公司名称变更函称,因…...
uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
