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

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

需求简介

轮播图是我们前端开发中的一个常见需求,在项目开发中,我们可以使用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;
}

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/43780.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IDEA新建项目并撰写Java代码的方法

本文介绍在IntelliJ IDEA软件中&#xff0c;新建项目或打开已有项目&#xff0c;并撰写Java代码的具体方法&#xff1b;Groovy等语言的代码也可以基于这种方法来撰写。 在之前的文章IntelliJ IDEA社区版在Windows电脑中的下载、安装方法&#xff08;https://blog.csdn.net/zheb…

35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 示例 1: 输入: nums [1,3,5,6], target 5 输出: 2示例 2:…

在任何岗位都可以把自己当成一个项目经理

这几天跟一个刚入职场的姐妹交流的时候&#xff0c;她问了我一个问题&#xff0c;如果让你总结三年从助理升到经理的关键点&#xff0c;你觉得是什么&#xff1f;我思考了那么几秒钟&#xff0c;大概就是——在任何岗位都把自己当项目经理。 今天给大家介绍我的项目管理工具——…

解析Spring Boot中的数据迁移工具

解析Spring Boot中的数据迁移工具 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 1. 数据迁移工具的重要性和选择 在开发和维护现代化应用程序时&#xff0c;数据迁移是一个关键的任务。Spring Bo…

头歌资源库(21)走方格

一、 问题描述 二、算法思想 首先&#xff0c;确定方格中间下方人所在的位置&#xff0c;即(row, col) (n//2, m//2)。初始化路径和为0。从初始位置开始&#xff0c;按照给定的5个方向进行移动&#xff1a;上(U)&#xff0c;下(D)&#xff0c;左(L)&#xff0c;右(R)&#x…

关于腾讯的那些事(6月新闻纪要)

祝贺&#xff01;深圳市科技进步一等奖 这份文件是关于腾讯云数据库TDSQL获得深圳市科技进步一等奖的详细报道。以下是详细总结分析&#xff1a; 获奖荣誉&#xff1a; 腾讯云数据库TDSQL荣获2022年深圳市科技进步一等奖&#xff0c;成为唯一入选的数据库产品。该奖项由深圳市…

菜鸡的原地踏步史05(◐‿◑)

每日一念 改掉自己想到哪写哪的坏习惯 子串 和为K的子数组 class Solution {/**有点像找出和为0的子数组&#xff0c;只不过这里和变成了k不太对&#xff0c;尝试使用双指针滑动窗口&#xff0c;完全过不去样例正确做法hashmap存放 sum -- count对nums中的数字进行遍历sum累…

C#与物联网:打造智能家居解决方案

引言 随着物联网&#xff08;IoT&#xff09;的快速发展&#xff0c;智能家居成为了现代生活的一个重要组成部分。智能家居系统通过连接各种智能设备&#xff0c;如智能灯光、恒温器、安防摄像头等&#xff0c;实现家居环境的自动化和智能化控制。C#作为一种强大的编程语言&am…

Linux C++ 045-设计模式之工厂模式

Linux C 045-设计模式之工厂模式 本节关键字&#xff1a;Linux、C、设计模式、简单工厂模式、工厂方法模式、抽象工厂模式 相关库函数&#xff1a; 简单工厂模式 基本简介 从设计模式的类型上来说&#xff0c;简单工厂模式是属于创建型模式&#xff0c;又叫做静态工厂方法&…

10、Python之写出更加Pythonic的代码:unpacking拆包机制

引言 有些小伙伴有其他编程语言的学习、使用的经验&#xff0c;然后迁移到Python。一般会比完全的新手小白&#xff0c;更快速地把Python用起来。这是他们的优势&#xff0c;但也是他们的劣势。 之所以这么说&#xff0c;是因为从其他编程语言带过来的&#xff0c;除了相通的编…

MOJO语言中的字典和哈希表:数据结构的灵活性与效率

MOJO是一种编程语言&#xff0c;它以其独特的语法和对现代编程范式的支持而闻名。在MOJO中&#xff0c;字典&#xff08;也称为哈希表或散列表&#xff09;是一种非常重要的数据结构&#xff0c;它允许开发者以键值对的形式存储和检索数据。本文将深入探讨MOJO语言中的字典和哈…

第十八节 LLaVA如何按需构建LORA训练(视觉、语言、映射多个组合训练)

文章目录 前言一、基于llava源码构建新的参数1、添加lora_vit参数2、训练命令脚本设置二、修改源码,构建lora训练1、修改源码-lora训练2、LLM模型lora加载3、VIT模型加载4、权重冻结操作5、结果显示三、实验结果前言 如果看了我前面文章,想必你基本对整个代码有了更深认识。…

Raylib 实现超大地图放大缩小与两种模式瓦片地图刷新

原理&#xff1a; 一种刷新模式&#xff1a; 在宫格内整体刷新&#xff0c;类似九宫格移动到边缘&#xff0c;则九宫格整体平移一个宫格&#xff0c;不过这里是移动一个瓦片像素&#xff0c;实际上就是全屏刷新&#xff0c;这个上限是 笔记本 3060 70帧 100*100个瓦片每帧都…

数据库之MQL

1&#xff0c;查询所有 mysql> select * from grade;2&#xff0c; mysql> select id,firstname,lastname from grade;3&#xff0c; mysql> select firstname,lastname from grade where id > 4;4&#xff0c; mysql> select * from grade where sex f;5&…

C++中的函数指针

C中的函数指针 在C中&#xff0c;函数指针是一个指向函数的指针&#xff0c;可以用来调用函数。函数指针的声明方式如下&#xff1a; 返回类型 (*指针变量名)(参数列表);例如&#xff0c;如果有一个函数&#xff1a; int add(int a, int b) {return a b; }可以声明一个指向…

微服务通信新纪元:Eureka与分布式服务网格的融合

微服务通信新纪元&#xff1a;Eureka与分布式服务网格的融合 引言 在微服务架构中&#xff0c;服务间的通信是构建分布式系统的核心。Eureka作为Netflix开源的服务发现框架&#xff0c;提供了服务注册与发现的功能&#xff0c;而服务网格技术则为服务间通信提供了更细粒度的控…

Hive/Spark窗口函数

窗口函数 hive文档链接 spark文档链接 1. OVER支持的函数 自然序编号 Syntax: ROW_NUMBER按等级编号 Syntax: RANK | DENSE_RANK | PERCENT_RANK分组内分桶&#xff0c;并返回对应桶的序号 Syntax: NTILE(n)Analytic Functions&#xff08;分析函数&#xff09; Syntax: CUM…

odoo17 常见升级问题

通用问题 模型名变更 字段变更 方法名变更 方法参数变更 xml数据结构定义变化 xml的id变更 view视图变化&#xff0c;导致xpath路径出差 template结构变化&#xff0c;&#xff0c;导致xpath路径出差&#xff0c;或者id不存在 升16问题 前端owl的架构变化 升17问题 前端 标…

什么,有狗快跑!慢着,这次手把手教你怎么过安全狗!(sql注入篇)

前言 在记忆里上次绕安全狗还是在上次&#xff0c;开开心心把自己之前绕过狗的payload拿出来&#xff0c;发现全部被拦截了&#xff0c;事情一下子就严肃起来了&#xff0c;这就开整。 环境 本次环境如下sqli-lab的sql注入靶场 网站安全狗APACHE版V4.0版本的最高防护等级绕过…

秋招Java后端开发冲刺——并发篇2(ThreadLocal、Future接口)

本文对ThreadLocal类和Future接口进行了总结概括&#xff0c;包括ThreadLocal类的原理、内存泄露等问题&#xff0c;和Future接口的使用等问题。 一、ThreadLocal 1. 介绍 ThreadLocal&#xff08;线程局部变量&#xff09;是Java中的一个类&#xff0c;线程通过维护一个本地…