Vue.js组件开发-实现全屏平滑移动、自适应图片全屏滑动切换
使用Vue实现全屏平滑移动、自适应图片全屏滑动切换的功能。使用Vue 3和Vue Router,并结合一些CSS样式来完成这个效果。
步骤
- 创建Vue项目:使用Vue CLI创建一个新的Vue项目。
- 准备图片:将需要展示的图片放在项目的
public
目录下。 - 创建组件:创建一个
FullscreenImageSlider
组件来实现图片滑动切换功能。 - 路由配置:在
router/index.js
中配置路由,将FullscreenImageSlider
组件添加到路由中。 - 样式设计:使用CSS样式实现全屏显示和图片自适应。
- 实现滑动切换逻辑:使用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>
使用说明
- 运行项目:在项目根目录下运行以下命令启动开发服务器:
npm run dev
- 添加图片:将需要展示的图片放在
public/images
目录下,并在FullscreenImageSlider.vue
组件的images
数组中添加图片名称。 - 浏览效果:打开浏览器,访问
http://localhost:5173
,即可看到全屏图片滑动切换的效果。点击左右箭头按钮可以切换图片。
注意事项
- 确保图片名称和路径正确,否则图片将无法显示。
- 可以根据需要调整图片数组的内容和样式,以满足不同的需求。
相关文章:
Vue.js组件开发-实现全屏平滑移动、自适应图片全屏滑动切换
使用Vue实现全屏平滑移动、自适应图片全屏滑动切换的功能。使用Vue 3和Vue Router,并结合一些CSS样式来完成这个效果。 步骤 创建Vue项目:使用Vue CLI创建一个新的Vue项目。准备图片:将需要展示的图片放在项目的public目录下。创建组件&…...
水果实体店品牌数字化:RWA + 智能体落地方案
一、方案背景 随着数字化技术的迅猛发展,实体零售行业正面临前所未有的挑战与机遇。传统的零售模式难以满足消费者对个性化、便捷化、智能化的需求,尤其是在水果等生鲜商品领域,如何通过技术手段提升运营效率、增强顾客体验、拓宽盈利模式&a…...
DeepSeek模型:开启人工智能的新篇章
DeepSeek模型:开启人工智能的新篇章 在当今快速发展的技术浪潮中,人工智能(AI)已经成为了推动社会进步和创新的核心力量之一。而DeepSeek模型,作为AI领域的一颗璀璨明珠,正以其强大的功能和灵活的用法&…...
Kubernetes 环境中的自动化运维实战指南
Kubernetes 作为容器编排领域的领导者,已经成为云原生应用的核心基础设施。然而,随着集群规模的扩大和应用的复杂化,手动运维 Kubernetes 集群变得愈发困难。自动化运维成为提升效率、保障系统稳定性的关键。本文将详细介绍如何在 Kubernetes 环境中实施自动化运维,涵盖工具…...

深入解析 C++17 中的 std::not_fn
文章目录 1. std::not_fn 的定义与目的2. 基本用法2.1 基本示例2.2 使用 Lambda 表达式2.3 与其他函数适配器的比较3. 在标准库中的应用3.1 结合标准库算法使用3.1.1 std::find_if 中的应用3.1.2 std::remove_if 中的应用3.1.3 其他标准库算法中的应用4. 高级技巧与最佳实践4.1…...

unity实现回旋镖函数
最近学习unity2D,想实现一个回旋镖武器,发出后就可以在角色周围回旋。 一、目标 1.不是一次性的,扔出去、返回、没有了;而是扔出去,返回到角色后方相同距离,再次返回;再次返回,永远…...

想品客老师的第九天:原型和继承
原型与继承前置看这里 原型 原型都了解了,但是不是所有对象都有对象原型 let obj1 {}console.log(obj1)let obj2 Object.create(null, {name: {value: 荷叶饭}})console.log(obj2) obj2为什么没有对象原型?obj2是完全的数据字典对象,没有…...
力扣【416. 分割等和子集】详细Java题解(背包问题)
首先我们可以求出数组和,当我们找到一个子集中元素的和为数组和的一半时,该就说明可以分割等和子集。 对于该问题我们可以转换成背包问题,求 数组里的元素 装入 数组和的一半大小的背包 能取得的最大值。 然后注意可以剪枝的地方。 代码&…...

2025年AI手机集中上市,三星Galaxy S25系列上市
2025年被认为是AI手机集中爆发的一年,各大厂商都会推出搭载人工智能的智能手机。三星Galaxy S25系列全球上市了。 三星Galaxy S25系列包含S25、S25和S25 Ultra三款机型,起售价为800美元(约合人民币5800元)。全系搭载骁龙8 Elite芯…...
为AI聊天工具添加一个知识系统 之79 详细设计之20 正则表达式 之7
本文要点 Q750、今天我们继续聊 本中的正则表达式。 在本项目(为AI聊天工具添加一个知识系统)中,将“正则表达式” 本来是计算机科学计算机科学的一个概念, 推广(扩张)到认知科学的“认知范畴”概念&#…...
理解PLT表和GOT表
1 简介 现代操作系统都是通过库来进行代码复用,降低开发成本提升系统整体效率。而库主要分为两种,一种是静态库,比如windows的.lib文件,macos的.a,linux的.a,另一种是动态库,比如windows的dll文…...

6 年没回老家过年了
今天是 2025 年的第一天,我们一家三口去了地坛庙会玩了会儿。 不是说过年的北京是空城吗?我愣是没抢到大年初一的门票,只好在咸鱼上溢价 40 买了两张票。 坐了一个小时的地坛终于到了,谁知迎来的是人山人海,同时小白牙…...

【原创改进】SCI级改进算法,一种多策略改进Alpha进化算法(IAE)
目录 1.前言2.CEC2017指标3.效果展示4.探索开发比5.定性分析6.附件材料7.代码获取 1.前言 本期推出一期原创改进——一种多策略改进Alpha进化算法(IAE)~ 选择CEC2017测试集低维(30dim)和高维(100dim)进行测…...
如何把一个python文件打包成一步一步安装的可执行程序
将一个 Python 文件打包成可执行程序(如 .exe 文件),并实现一步一步的安装过程,通常需要以下步骤: 1. 将 Python 文件打包成可执行文件 使用工具将 Python 脚本打包成可执行文件(如 .exe)。常用…...

防火墙安全策略部署
目录: 一、实验拓扑: 二、实验要求: 三、需求分析: 四、详细设计: 五、实验步骤: 1.进行vlan划分: 2.IP配置: 3.云端服务配置: 4.划分子网: 5.防火墙…...
c++ map/multimap容器 学习笔记
1 map的基本概念 简介: map中所有的元素都是pair pair中第一个元素是key(键),第二个元素是value(值) 所有元素都会根据元素的键值自动排序。本质: map/multimap 属于关联式容器,底…...

【解决方案】MuMu模拟器移植系统进度条卡住98%无法打开
之前在Vmware虚拟机里配置了mumu模拟器,现在想要移植到宿主机中 1、虚拟机中的MuMu模拟器12-1是目标系统,对应的目录如下 C:\Program Files\Netease\MuMu Player 12\vms\MuMuPlayer-12.0-1 2、Vmware-虚拟机-设置-选项,启用共享文件夹 3、复…...

日志收集Day007
1.配置ES集群TLS认证: (1)elk101节点生成证书文件 cd /usr/share/elasticsearch ./bin/elasticsearch-certutil cert -out config/elastic-certificates.p12 -pass "" --days 3650 (2)elk101节点为证书文件修改属主和属组 chown elasticsearch:elasticsearch con…...
虚拟机里网络设置-桥接与NAT
桥接(Bridging)和NAT(网络地址转换,Network Address Translation)是网络中的两种不同技术,主要用于数据包的处理和转发。以下是它们的主要区别: 1. 工作原理 桥接: 桥接工作在数据链…...

人工智能 - 1
深度强化学习(Deep Reinforcement Learning) 图神经网络(Graph Neural Networks, GNNs) Transformer 一种深度学习模型 大语言模型(Large Language Models, LLMs) 人工智能 • Marvin Minsky 将其定义…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...
MVC 数据库
MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...

selenium学习实战【Python爬虫】
selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

优选算法第十二讲:队列 + 宽搜 优先级队列
优选算法第十二讲:队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
laravel8+vue3.0+element-plus搭建方法
创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

springboot整合VUE之在线教育管理系统简介
可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生,小白用户,想学习知识的 有点基础,想要通过项…...