当前位置: 首页 > 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 将其定义…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

淘宝扭蛋机小程序系统开发:打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

HTML前端开发:JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...