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

Vue.js组件开发-实现全屏平滑移动、自适应图片全屏滑动切换

使用Vue实现全屏平滑移动、自适应图片全屏滑动切换的功能。使用Vue 3和Vue Router,并结合一些CSS样式来完成这个效果。

步骤

  1. 创建Vue项目:使用Vue CLI创建一个新的Vue项目。
  2. 准备图片:将需要展示的图片放在项目的public目录下。
  3. 创建组件:创建一个FullscreenImageSlider组件来实现图片滑动切换功能。
  4. 路由配置:在router/index.js中配置路由,将FullscreenImageSlider组件添加到路由中。
  5. 样式设计:使用CSS样式实现全屏显示和图片自适应。
  6. 实现滑动切换逻辑:使用JavaScript实现图片的平滑滑动切换。

详细代码及注释

1. 创建Vue项目

首先,确保已经安装了Vue CLI。如果没有安装,可以使用以下命令进行安装:

npm install -g @vue/cli

然后创建一个新的Vue项目:

vue create fullscreen-image-slider
cd fullscreen-image-slider
2. 准备图片

将需要展示的图片放在public目录下,例如public/images目录。

3. 创建组件

src/components目录下创建一个FullscreenImageSlider.vue组件,代码如下:

<template><div class="fullscreen-slider"><!-- 图片容器 --><div class="slider-container" :style="{ transform: `translateX(-${currentIndex * 100}%)` }"><!-- 遍历图片数组,渲染每个图片 --><imgv-for="(image, index) in images":key="index":src="`/images/${image}`"alt="Fullscreen Image"class="slider-image"/></div><!-- 上一张按钮 --><button class="slider-button prev" @click="prevImage"><i class="fas fa-chevron-left"></i></button><!-- 下一张按钮 --><button class="slider-button next" @click="nextImage"><i class="fas fa-chevron-right"></i></button></div>
</template><script setup>
import { ref } from 'vue';// 定义图片数组,这里假设图片名称为image1.jpg, image2.jpg, image3.jpg
const images = ref(['image1.jpg', 'image2.jpg', 'image3.jpg']);
// 当前显示的图片索引
const currentIndex = ref(0);// 上一张图片的方法
const prevImage = () => {// 如果当前索引大于0,则将索引减1if (currentIndex.value > 0) {currentIndex.value--;} else {// 否则将索引设置为最后一张图片的索引currentIndex.value = images.value.length - 1;}
};// 下一张图片的方法
const nextImage = () => {// 如果当前索引小于图片数组的长度减1,则将索引加1if (currentIndex.value < images.value.length - 1) {currentIndex.value++;} else {// 否则将索引设置为0currentIndex.value = 0;}
};
</script><style scoped>
.fullscreen-slider {position: relative;width: 100vw;height: 100vh;overflow: hidden;
}.slider-container {display: flex;width: 300%; /* 根据图片数量调整宽度 */height: 100%;transition: transform 0.5s ease; /* 平滑过渡效果 */
}.slider-image {width: 100vw;height: 100vh;object-fit: cover; /* 图片自适应 */
}.slider-button {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0, 0, 0, 0.5);color: white;border: none;padding: 10px;cursor: pointer;z-index: 10;
}.prev {left: 10px;
}.next {right: 10px;
}
</style>
4. 路由配置

src/router/index.js中配置路由,将FullscreenImageSlider组件添加到路由中:

import { createRouter, createWebHistory } from 'vue-router';
import FullscreenImageSlider from '../components/FullscreenImageSlider.vue';const routes = [{path: '/',name: 'FullscreenImageSlider',component: FullscreenImageSlider,},
];const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes,
});export default router;
5. 修改App.vue

src/App.vue中引入路由:

<template><div id="app"><router-view></router-view></div>
</template><script setup>
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

使用说明

  1. 运行项目:在项目根目录下运行以下命令启动开发服务器:
npm run dev
  1. 添加图片:将需要展示的图片放在public/images目录下,并在FullscreenImageSlider.vue组件的images数组中添加图片名称。
  2. 浏览效果:打开浏览器,访问http://localhost:5173,即可看到全屏图片滑动切换的效果。点击左右箭头按钮可以切换图片。

注意事项

  • 确保图片名称和路径正确,否则图片将无法显示。
  • 可以根据需要调整图片数组的内容和样式,以满足不同的需求。

相关文章:

Vue.js组件开发-实现全屏平滑移动、自适应图片全屏滑动切换

使用Vue实现全屏平滑移动、自适应图片全屏滑动切换的功能。使用Vue 3和Vue Router&#xff0c;并结合一些CSS样式来完成这个效果。 步骤 创建Vue项目&#xff1a;使用Vue CLI创建一个新的Vue项目。准备图片&#xff1a;将需要展示的图片放在项目的public目录下。创建组件&…...

openRv1126 AI算法部署实战之——ONNX模型部署实战

在RV1126开发板上部署ONNX算法&#xff0c;实时目标检测RTSP传输。视频演示地址 rv1126 yolov5 实时目标检测 rtsp传输_哔哩哔哩_bilibili 一、准备工作 1.从官网下载YOLOv5-v7.0工程&#xff08;YOLOv5的第7个版本&#xff09; 手动在线下载&#xff1a; Releases ultraly…...

实验作业管理系统的设计与实现

标题:实验作业管理系统的设计与实现 内容:1.摘要 本系统旨在解决当前实验作业管理中存在的问题&#xff0c;提高管理效率和质量。通过对现有系统的调研和分析&#xff0c;我们确定了系统的功能需求和性能要求&#xff0c;并采用了先进的技术和架构进行设计和实现。系统实现了实…...

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》032-组件的Teleport功能

标题详情作者简介愚公搬代码头衔华为云特约编辑&#xff0c;华为云云享专家&#xff0c;华为开发者专家&#xff0c;华为产品云测专家&#xff0c;CSDN博客专家&#xff0c;CSDN商业化专家&#xff0c;阿里云专家博主&#xff0c;阿里云签约作者&#xff0c;腾讯云优秀博主&…...

leetcode——二叉树的最大深度(java)

给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3 示例 2&#xff1a; 输入&#xff1a;root [1,null,2] 输…...

【PyTorch】3.张量类型转换

个人主页&#xff1a;Icomi 在深度学习蓬勃发展的当下&#xff0c;PyTorch 是不可或缺的工具。它作为强大的深度学习框架&#xff0c;为构建和训练神经网络提供了高效且灵活的平台。神经网络作为人工智能的核心技术&#xff0c;能够处理复杂的数据模式。通过 PyTorch&#xff0…...

自制一个入门STM32 四足机器人具体开发顺序

0 前期准备 1. 知识储备 学习 STM32 微控制器的基础知识&#xff0c;包括 GPIO、定时器、串口通信等外设的使用&#xff0c;可通过官方文档、教程和视频课程进行学习。了解舵机控制原理&#xff0c;因为四足机器人通常使用舵机来实现关节运动。掌握基本的机械结构设计知识&am…...

SpringCloud基础二(完结)

HTTP客户端Feign 在SpringCloud基础一中&#xff0c;我们利用RestTemplate结合服务注册与发现来发起远程调用的代码如下&#xff1a; String url "http://userservice/user/" order.getUserId(); User user restTemplate.getForObject(url, User.class);以上代码就…...

云原生时代,如何构建高效分布式监控系统

文章目录 一.监控现状二.Thanos原理分析SidecarQuerierStoreCompactor 三.Sidecar or ReceiverThanos Receiver工作原理 四.分布式运维架构 一.监控现状 Prometheus是CNCF基金会管理的一个开源监控项目&#xff0c;由于其良好的架构设计和完善的生态&#xff0c;迅速成为了监控…...

WordPress使用(1)

1. 概述 WordPress是一个开源博客框架&#xff0c;配合不同主题&#xff0c;可以有多种展现方式&#xff0c;博客、企业官网、CMS系统等&#xff0c;都可以很好的实现。 官网&#xff1a;博客工具、发布平台和内容管理系统 – WordPress.org China 简体中文&#xff0c;这里可…...

小白爬虫冒险之反“反爬”:无限debugger、禁用开发者工具、干扰控制台...(持续更新)

背景浅谈 小白踏足JS逆向领域也有一年了&#xff0c;对于逆向这个需求呢主要要求就是让我们去破解**“反爬机制”**&#xff0c;即反“反爬”&#xff0c;脚本处理层面一般都是decipher网站对request设置的cipher&#xff0c;比如破解一个DES/AES加密拿到key。这篇文章先不去谈…...

Time Constant | RC、RL 和 RLC 电路中的时间常数

注&#xff1a;本文为 “Time Constant” 相关文章合辑。 机翻&#xff0c;未校。 How To Find The Time Constant in RC and RL Circuits June 8, 2024 &#x1f4a1; Key learnings: 关键学习点&#xff1a; Time Constant Definition: The time constant (τ) is define…...

Python爬虫学习第三弹 —— Xpath 页面解析 实现无广百·度

早上好啊&#xff0c;大佬们。上回使用 Beautiful Soup 进行页面解析的内容是不是已经理解得十分透彻了~ 这回我们再来尝试使用另外一种页面解析&#xff0c;来重构上一期里写的那些代码。 讲完Xpath之后&#xff0c;小白兔会带大家解决上期里百度搜索的代码编写&#xff0c;保…...

JS 正则表达式 -- 分组【详解】含普通分组、命名分组、反向引用

普通分组 使用圆括号 () 来创建分组捕获匹配的内容&#xff0c;通过正则表达式匹配结果的数组来访问这些捕获的内容。 const str "Hello, World!"; const regex /(Hello), (World)!$/; const match str.match(regex);if (match) {console.log("完整匹配结果…...

Leetcode刷题-不定长滑动窗口

分享丨【题单】滑动窗口与双指针&#xff08;定长/不定长/单序列/双序列/三指针/分组循环&#xff09; - 力扣&#xff08;LeetCode&#xff09; 3090 class Solution:def maximumLengthSubstring(self, s: str) -> int:c Counter()res 0rk -1for i in range(len(s)):i…...

【Rust自学】15.6. RefCell与内部可变性:“摆脱”安全性限制

题外话&#xff0c;这篇文章一共4050字&#xff0c;是截止到目前为止最长的文章&#xff0c;如果你能坚持读完并理解&#xff0c;那真的很强&#xff01; 喜欢的话别忘了点赞、收藏加关注哦&#xff08;加关注即可阅读全文&#xff09;&#xff0c;对接下来的教程有兴趣的可以…...

护眼好帮手:Windows显示器调节工具

在长时间使用电脑的过程中&#xff0c;显示器的亮度和色温对眼睛的舒适度有着重要影响。传统的显示器调节方式不仅操作繁琐&#xff0c;而且在低亮度下容易导致色彩失真。因此&#xff0c;今天我想为大家介绍一款适用于Windows系统的护眼工具&#xff0c;它可以帮助你轻松调节显…...

使用 OpenResty 构建高效的动态图片水印代理服务20250127

使用 OpenResty 构建高效的动态图片水印代理服务 在当今数字化的时代&#xff0c;图片在各种业务场景中广泛应用。为了保护版权、统一品牌形象&#xff0c;动态图片水印功能显得尤为重要。然而&#xff0c;直接在后端服务中集成水印功能&#xff0c;往往会带来代码复杂度增加、…...

36、【OS】【Nuttx】OSTest分析(2):环境变量测试

背景 2025.1.29 蛇年快乐&#xff01; 接之前wiki 35、【OS】【Nuttx】OSTest分析&#xff08;1&#xff09;&#xff1a;stdio测试&#xff08;五&#xff09; 已经分析完了第一个测试项&#xff0c;输入输出端口测试&#xff0c;接下来分析下环境变量测试&#xff0c;也比较…...

C++并发编程指南04

文章目录 共享数据的问题3.1.1 条件竞争双链表的例子条件竞争示例恶性条件竞争的特点 3.1.2 避免恶性条件竞争1. 使用互斥量保护共享数据结构2. 无锁编程3. 软件事务内存&#xff08;STM&#xff09; 总结互斥量与共享数据保护3.2.1 互斥量使用互斥量保护共享数据示例代码&…...

Java实现LRU缓存策略实战

实现LRU模型选择LRU缓存回收算法集成Google Guava(LRU缓存策略)插件Google Guava(LRU策略)缓存示例总结LRU(Least Recently Used,最近最少使用)缓存是一种常见的缓存淘汰策略。它的基本思想是优先保留最近被访问过的数据,淘汰最久未被访问的数据。这种策略的目的是为了…...

三个不推荐使用的线程池

线程池的种类 其实看似这么多的线程池&#xff0c;都离不开ThreadPoolExecutor去创建&#xff0c;只不过他们是简化一些参数 newFixedThreadPool 里面全是核心线程 有资源耗尽的风险&#xff0c;任务队列最大长度为Integer.MAX_VALUE&#xff0c;可能会堆积大量的请求&#xff…...

Golang 并发机制-1:Golang并发特性概述

并发是现代软件开发中的一个基本概念&#xff0c;它使程序能够同时执行多个任务&#xff0c;从而提高效率和响应能力。在本文中&#xff0c;我们将探讨并发性在现代软件开发中的重要性&#xff0c;并深入研究Go处理并发任务的独特方法。 并发的重要性 增强性能 并发在提高软…...

Flink中的时间和窗口

在批处理统计中&#xff0c;我们可以等待一批数据都到齐后&#xff0c;统一处理。但是在实时处理统计中&#xff0c;我们是来一条就得处理一条&#xff0c;那么我们怎么统计最近一段时间内的数据呢&#xff1f;引入“窗口”。 所谓的“窗口”&#xff0c;一般就是划定的一段时…...

Alfresco Content Services dockerCompose自动化部署详尽操作

Alfresco Content Services docker社区部署文档 Alfresco Content Services简介 官方说明书 https://support.hyland.com/r/Alfresco/Alfresco-Content-Services-Community-Edition/23.4/Alfresco-Content-Services-Community-Edition/Using/Content/Folder-rules/Defining-…...

吴恩达深度学习——深层神经网络

来自https://www.bilibili.com/video/BV1FT4y1E74V&#xff0c;仅为本人学习所用。 符号约定 对于该深层网络&#xff0c;有四层&#xff0c;包含三个隐藏层和一个输出层。 隐藏层中&#xff0c;第一层有五个单元、第二层有五个单元&#xff0c;第三层有三个单元。标记 l l l…...

【算法设计与分析】实验1:字符串匹配问题的算法设计与求解

目录 一、实验目的 二、实验环境 三、实验内容 四、核心代码 五、记录与处理 六、思考与总结 七、完整报告和成果文件提取链接 一、实验目的 给定一个文本&#xff0c;在该文本中查找并定位任意给定字符串。 1、深刻理解并掌握蛮力法的设计思想&#xff1b; 2、提高应用…...

C语言二级题解:查找字母以及其他字符个数、数字字符串转双精度值、二维数组上下三角区域数据对调

目录 一、程序填空题 --- 查找字母以及其他字符个数 题目 分析 二、程序修改 --- 数字字符串转双精度值 题目 分析 小数位字符串转数字 三、程序设计 --- 二维数组上下三角区域数据对调 题目 分析 前言 本文来讲解&#xff1a; 查找字母以及其他字符个数、数字字符串…...

Git进阶之旅:Git 配置信息 Config

Git 配置级别&#xff1a; 仓库级别&#xff1a;local [ 优先级最高 ]用户级别&#xff1a;global [ 优先级次之 ]系统级别&#xff1a;system [ 优先级最低 ] 配置文件位置&#xff1a; git 仓库级别对应的配置文件是当前仓库下的 .git/configgit 用户级别对应的配置文件时用…...

Qwen2-VL:在任何分辨率下增强视觉语言模型对世界的感知 (大型视觉模型 核心技术 分享)

摘要 我们推出了Qwen2-VL系列,这是对之前Qwen-VL模型的高级升级,重新定义了视觉处理中的常规预设分辨率方法。Qwen2-VL引入了Naive Dynamic Resolution机制,使模型能够动态地将不同分辨率的图像转换为不同的视觉令牌数量。这种方法允许模型生成更高效和准确的视觉表示,紧密…...

【C语言】在Windows上为可执行文件.exe添加自定义图标

本文详细介绍了在 Windows 环境下,如何为使用 GCC 编译器编译的 C程序 添加自定义图标,从而生成带有图标的 .exe 可执行文件。通过本文的指导,读者可以了解到所需的条件以及具体的操作步骤,使生成的程序更具专业性和个性化。 目录 1. 准备条件2. 具体步骤步骤 1: 准备资源文…...

记录 | Docker的windows版安装

目录 前言一、1.1 打开“启用或关闭Windows功能”1.2 安装“WSL”方式1&#xff1a;命令行下载方式2&#xff1a;离线包下载 二、Docker Desktop更新时间 前言 参考文章&#xff1a;Windows Subsystem for Linux——解决WSL更新速度慢的方案 参考视频&#xff1a;一个视频解决D…...

FortiOS 存在身份验证绕过导致命令执行漏洞(CVE-2024-55591)

免责声明: 本文旨在提供有关特定漏洞的深入信息,帮助用户充分了解潜在的安全风险。发布此信息的目的在于提升网络安全意识和推动技术进步,未经授权访问系统、网络或应用程序,可能会导致法律责任或严重后果。因此,作者不对读者基于本文内容所采取的任何行为承担责任。读者在…...

系统思考—心智模式

“我们的大脑对连贯性的渴望远胜于对准确性的追求。”—诺贝尔经济学得主丹尼尔卡尼曼 在面对复杂的决策时&#xff0c;我们往往更倾向于寻找那些能够迅速串联起来的信息&#xff0c;而非深入挖掘每一个细节的真实性。这种倾向在日常生活中或许能帮助我们迅速作出决策&#xf…...

【信息系统项目管理师-选择真题】2008上半年综合知识答案和详解

更多内容请见: 备考信息系统项目管理师-专栏介绍和目录 文章目录 【第1题】【第2题】【第3题】【第4题】【第5题】【第6题】【第7~8题】【第9题】【第10题】【第11题】【第12题】【第13题】【第14题】【第15题】【第16~20题】【第21题】【第22题】【第23题】【第24题】【第25题…...

深入理解三高架构:高可用性、高性能、高扩展性的最佳实践

引言 在现代互联网环境下&#xff0c;随着用户规模和业务需求的快速增长&#xff0c;系统架构的设计变得尤为重要。为了确保系统能够在高负载和复杂场景下稳定运行&#xff0c;"三高架构"&#xff08;高可用性、高性能、高扩展性&#xff09;成为技术架构设计中的核…...

从 SAP 功能顾问到解决方案架构师:破茧成蝶之路

目录 行业瞭望&#xff1a;架构师崭露头角 现状剖析&#xff1a;功能顾问的局限与机遇 能力跃迁&#xff1a;转型的核心要素 &#xff08;一&#xff09;专业深度的掘进 &#xff08;二&#xff09;集成能力的拓展 &#xff08;三&#xff09;知识广度的延伸 &#xff0…...

《从因果关系的角度学习失真不变表示以用于图像恢复》学习笔记

paper&#xff1a;2303.06859 GitHub&#xff1a;lixinustc/Causal-IR-DIL: Distortion invariant feature learning for image restoration from a causality perspective 2023 CVPR 目录 摘要 1、介绍 1.1 图像修复任务 1.2 失真不变表示学习 1.3 因果效应估计的挑战…...

STM32 PWM驱动直流电机

接线图&#xff1a; 代码配置&#xff1a; 根据驱动舵机的代码来写&#xff0c;与舵机不同的是&#xff0c;这次的引脚接到了PA2上&#xff0c;所以需要改一下引脚以及改为OC3通道。 另外还需在配置两个GPIO引脚&#xff0c;来控制电机的旋转方向&#xff0c;这里连接到了PA4与…...

【Hadoop】Hadoop 概述

Hadoop 概述 Hadoop 是什么Hadoop 发展历史Hadoop 三大发行版本Hadoop 优势&#xff08;4 高&#xff09;Hadoop 组成&#xff08;面试重点&#xff09;HDFS 架构概述YARN 架构概述MapReduce 架构概述HDFS、YARN、MapReduce 三者关系 大数据技术生态体系 Hadoop 是什么 Hadoop…...

【仪器分析】FACTs-幅度

** 当然&#xff0c;这回是一篇没有插图的文章&#xff0c;但是有足够多的描述可以用来想象。 我拿这个系列当作前传试试水 引言。正弦信号可能会发生怎样的变化&#xff1f; ** 近日学FACTs&#xff0c;险些成为传函丁真&#xff0c; 如果从仪器角度考察正弦信号的测量&…...

deepseek R1的确不错,特别是深度思考模式

deepseek R1的确不错&#xff0c;特别是深度思考模式&#xff0c;每次都能自我反省改进。比如我让 它写文案&#xff1a; 【赛博朋克版程序员新春密码——2025我们来破局】 亲爱的代码骑士们&#xff1a; 当CtrlS的肌肉记忆遇上抢票插件&#xff0c;当Spring Boot的…...

Unity敌人逻辑笔记

写ai逻辑基本上都需要状态机。因为懒得手搓状态机&#xff0c;所以选择直接用动画状态机当逻辑状态机用。 架构设计 因为敌人的根节点已经有一个animator控制动画&#xff0c;只能增加一个子节点AI&#xff0c;给它加一个animator指向逻辑“动画”状态机。还有一个脚本&#…...

C++,STL 简介:历史、组成、优势

文章目录 引言一、STL 的历史STL 的核心组成三、STL 的核心优势四、结语进一步学习资源&#xff1a; 引言 C 是一门强大且灵活的编程语言&#xff0c;但其真正的魅力之一在于其标准库——尤其是标准模板库&#xff08;Standard Template Library, STL&#xff09;。STL 提供了…...

【事务管理】

目录 一. 介绍与操作二. Spring事务管理三. 事务四大特性 \quad 一. 介绍与操作 \quad \quad 二. Spring事务管理 \quad 推荐加在经常进行增删改的方法上 \quad 三. 事务四大特性 \quad ctrlaltt...

ERP革新:打破数据壁垒,重塑市场竞争

标题&#xff1a;ERP革新&#xff1a;打破数据壁垒&#xff0c;重塑市场竞争 文章信息摘要&#xff1a; Operator和Computer Use等工具通过模拟用户交互和自动化数据提取&#xff0c;绕过了传统ERP系统的API限制&#xff0c;打破了其数据护城河。这种技术革新降低了企业切换软…...

小阿卡纳牌

小阿卡纳牌 风&#xff1a;热湿 火&#xff1a;热干 水&#xff1a;冷湿 土&#xff1a;冷干 火风&#xff1a;温度相同&#xff0c;但是湿度不同&#xff0c;二人可能会在短期内十分热情&#xff0c;但是等待热情消退之后&#xff0c;会趋于平淡。 湿度相同、温度不同&#x…...

android的gradle

资料&#xff1a; GitHub - ChenSWD/CopyGradleInAction: 备份《Gradle IN Action》书中的源码&#xff0c;添加了部分注释 //github上一个开源项目&#xff0c;外加pdf书 Gradle User Manual gradle官网 讲的挺好的博客 Gradle之重新认识Gradle(项目结构、命令行、tas…...

时间轮:XXL-JOB 高效、精准定时任务调度实现思路分析

大家好&#xff0c;我是此林。 定时任务是我们项目中经常会遇到的一个场景。那么如果让我们手动来实现一个定时任务框架&#xff0c;我们会怎么做呢&#xff1f; 1. 基础实现&#xff1a;简单的线程池时间轮询 最直接的方式是创建一个定时任务线程池&#xff0c;用户每提交一…...

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》029-组件的数据注入

标题详情作者简介愚公搬代码头衔华为云特约编辑&#xff0c;华为云云享专家&#xff0c;华为开发者专家&#xff0c;华为产品云测专家&#xff0c;CSDN博客专家&#xff0c;CSDN商业化专家&#xff0c;阿里云专家博主&#xff0c;阿里云签约作者&#xff0c;腾讯云优秀博主&…...