当前位置: 首页 > 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目录下。创建组件&…...

水果实体店品牌数字化:RWA + 智能体落地方案

一、方案背景 随着数字化技术的迅猛发展&#xff0c;实体零售行业正面临前所未有的挑战与机遇。传统的零售模式难以满足消费者对个性化、便捷化、智能化的需求&#xff0c;尤其是在水果等生鲜商品领域&#xff0c;如何通过技术手段提升运营效率、增强顾客体验、拓宽盈利模式&a…...

DeepSeek模型:开启人工智能的新篇章

DeepSeek模型&#xff1a;开启人工智能的新篇章 在当今快速发展的技术浪潮中&#xff0c;人工智能&#xff08;AI&#xff09;已经成为了推动社会进步和创新的核心力量之一。而DeepSeek模型&#xff0c;作为AI领域的一颗璀璨明珠&#xff0c;正以其强大的功能和灵活的用法&…...

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&#xff0c;想实现一个回旋镖武器&#xff0c;发出后就可以在角色周围回旋。 一、目标 1.不是一次性的&#xff0c;扔出去、返回、没有了&#xff1b;而是扔出去&#xff0c;返回到角色后方相同距离&#xff0c;再次返回&#xff1b;再次返回&#xff0c;永远…...

想品客老师的第九天:原型和继承

原型与继承前置看这里 原型 原型都了解了&#xff0c;但是不是所有对象都有对象原型 let obj1 {}console.log(obj1)let obj2 Object.create(null, {name: {value: 荷叶饭}})console.log(obj2) obj2为什么没有对象原型&#xff1f;obj2是完全的数据字典对象&#xff0c;没有…...

力扣【416. 分割等和子集】详细Java题解(背包问题)

首先我们可以求出数组和&#xff0c;当我们找到一个子集中元素的和为数组和的一半时&#xff0c;该就说明可以分割等和子集。 对于该问题我们可以转换成背包问题&#xff0c;求 数组里的元素 装入 数组和的一半大小的背包 能取得的最大值。 然后注意可以剪枝的地方。 代码&…...

2025年AI手机集中上市,三星Galaxy S25系列上市

2025年被认为是AI手机集中爆发的一年&#xff0c;各大厂商都会推出搭载人工智能的智能手机。三星Galaxy S25系列全球上市了。 三星Galaxy S25系列包含S25、S25和S25 Ultra三款机型&#xff0c;起售价为800美元&#xff08;约合人民币5800元&#xff09;。全系搭载骁龙8 Elite芯…...

为AI聊天工具添加一个知识系统 之79 详细设计之20 正则表达式 之7

本文要点 Q750、今天我们继续聊 本中的正则表达式。 在本项目&#xff08;为AI聊天工具添加一个知识系统&#xff09;中&#xff0c;将“正则表达式” 本来是计算机科学计算机科学的一个概念&#xff0c; 推广&#xff08;扩张&#xff09;到认知科学的“认知范畴”概念&#…...

理解PLT表和GOT表

1 简介 现代操作系统都是通过库来进行代码复用&#xff0c;降低开发成本提升系统整体效率。而库主要分为两种&#xff0c;一种是静态库&#xff0c;比如windows的.lib文件&#xff0c;macos的.a&#xff0c;linux的.a&#xff0c;另一种是动态库&#xff0c;比如windows的dll文…...

6 年没回老家过年了

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

【原创改进】SCI级改进算法,一种多策略改进Alpha进化算法(IAE)

目录 1.前言2.CEC2017指标3.效果展示4.探索开发比5.定性分析6.附件材料7.代码获取 1.前言 本期推出一期原创改进——一种多策略改进Alpha进化算法&#xff08;IAE&#xff09;~ 选择CEC2017测试集低维&#xff08;30dim&#xff09;和高维&#xff08;100dim&#xff09;进行测…...

如何把一个python文件打包成一步一步安装的可执行程序

将一个 Python 文件打包成可执行程序&#xff08;如 .exe 文件&#xff09;&#xff0c;并实现一步一步的安装过程&#xff0c;通常需要以下步骤&#xff1a; 1. 将 Python 文件打包成可执行文件 使用工具将 Python 脚本打包成可执行文件&#xff08;如 .exe&#xff09;。常用…...

防火墙安全策略部署

目录&#xff1a; 一、实验拓扑&#xff1a; 二、实验要求&#xff1a; 三、需求分析&#xff1a; 四、详细设计&#xff1a; 五、实验步骤&#xff1a; 1.进行vlan划分&#xff1a; 2.IP配置&#xff1a; 3.云端服务配置&#xff1a; 4.划分子网&#xff1a; 5.防火墙…...

c++ map/multimap容器 学习笔记

1 map的基本概念 简介&#xff1a; map中所有的元素都是pair pair中第一个元素是key&#xff08;键&#xff09;&#xff0c;第二个元素是value&#xff08;值&#xff09; 所有元素都会根据元素的键值自动排序。本质&#xff1a; map/multimap 属于关联式容器&#xff0c;底…...

【解决方案】MuMu模拟器移植系统进度条卡住98%无法打开

之前在Vmware虚拟机里配置了mumu模拟器&#xff0c;现在想要移植到宿主机中 1、虚拟机中的MuMu模拟器12-1是目标系统&#xff0c;对应的目录如下 C:\Program Files\Netease\MuMu Player 12\vms\MuMuPlayer-12.0-1 2、Vmware-虚拟机-设置-选项&#xff0c;启用共享文件夹 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

桥接&#xff08;Bridging&#xff09;和NAT&#xff08;网络地址转换&#xff0c;Network Address Translation&#xff09;是网络中的两种不同技术&#xff0c;主要用于数据包的处理和转发。以下是它们的主要区别&#xff1a; 1. 工作原理 桥接&#xff1a; 桥接工作在数据链…...

人工智能 - 1

深度强化学习&#xff08;Deep Reinforcement Learning&#xff09; 图神经网络&#xff08;Graph Neural Networks, GNNs&#xff09; Transformer 一种深度学习模型 大语言模型&#xff08;Large Language Models, LLMs&#xff09; 人工智能 • Marvin Minsky 将其定义…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; 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 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

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 提…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 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之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...