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

Vue.js组件开发-实现全屏背景图片滑动切换特效

使用 Vue 实现全屏背景图片滑动切换特效的详细步骤、代码、注释和使用说明。

步骤

  1. 创建 Vue 项目:使用 Vue CLI 创建一个新的 Vue 项目。
  2. 准备图片资源:准备好要用于背景切换的图片,并将它们放在项目的合适目录下。
  3. 编写 HTML 结构:创建一个包含图片容器和导航按钮的 HTML 结构。
  4. 编写 CSS 样式:设置全屏背景和图片切换动画效果。
  5. 编写 Vue 组件逻辑:实现图片切换的逻辑。

详细代码

1. 创建 Vue 项目

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

npm install -g @vue/cli

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

vue create background-slide-effect
cd background-slide-effect
2. 准备图片资源

src/assets 目录下创建一个 images 文件夹,并将你要使用的图片放入其中。例如,有三张图片:image1.jpgimage2.jpgimage3.jpg

3. 编写组件代码

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

<template><div class="background-slider"><!-- 图片容器 --><divv-for="(image, index) in images":key="index":class="{ 'background-image': true, 'active': currentIndex === index }":style="{ backgroundImage: `url(${require(`@/assets/images/${image}`)})` }"></div><!-- 导航按钮 --><div class="navigation"><button @click="prevImage" :disabled="currentIndex === 0">上一张</button><button @click="nextImage" :disabled="currentIndex === images.length - 1">下一张</button></div></div>
</template><script>
export default {name: 'BackgroundSlider',data() {return {// 图片数组,存储要显示的图片文件名images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],// 当前显示的图片索引currentIndex: 0};},methods: {// 切换到上一张图片prevImage() {if (this.currentIndex > 0) {this.currentIndex--;}},// 切换到下一张图片nextImage() {if (this.currentIndex < this.images.length - 1) {this.currentIndex++;}}}
};
</script><style scoped>
.background-slider {position: relative;width: 100vw;height: 100vh;overflow: hidden;
}.background-image {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center;opacity: 0;transition: opacity 1s ease-in-out;
}.background-image.active {opacity: 1;
}.navigation {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;gap: 10px;
}.navigation button {padding: 10px 20px;border: none;background-color: rgba(0, 0, 0, 0.7);color: white;cursor: pointer;border-radius: 5px;
}.navigation button:disabled {opacity: 0.5;cursor: not-allowed;
}
</style>
4. 在 App.vue 中使用组件
<template><div id="app"><BackgroundSlider /></div>
</template><script>
import BackgroundSlider from './components/BackgroundSlider.vue';export default {name: 'App',components: {BackgroundSlider}
};
</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>

代码注释

  • HTML 部分

    • v-for 指令用于循环渲染图片容器,v-bind:key 确保每个图片容器有唯一的标识。
    • :class 绑定 active 类,用于控制当前显示的图片。
    • :style 绑定 backgroundImage 样式,动态设置背景图片的 URL。
  • JavaScript 部分

    • data 函数返回组件的数据,包括图片数组和当前显示的图片索引。
    • prevImage 方法用于切换到上一张图片,nextImage 方法用于切换到下一张图片。
  • CSS 部分

    • .background-image 类设置图片容器的基本样式,包括绝对定位、背景大小和透明度。
    • .background-image.active 类设置当前显示图片的透明度为 1,实现淡入效果。
    • .navigation 类设置导航按钮的样式,包括定位和布局。

使用说明

  1. 将准备好的图片放入 src/assets/images 目录下,并在 BackgroundSlider.vue 组件的 images 数组中添加图片文件名。
  2. 运行项目:
npm run serve
  1. 打开浏览器,访问 http://localhost:8080,即可看到全屏背景图片滑动切换特效。可以点击“上一张”和“下一张”按钮来切换图片。

相关文章:

Vue.js组件开发-实现全屏背景图片滑动切换特效

使用 Vue 实现全屏背景图片滑动切换特效的详细步骤、代码、注释和使用说明。 步骤 创建 Vue 项目&#xff1a;使用 Vue CLI 创建一个新的 Vue 项目。准备图片资源&#xff1a;准备好要用于背景切换的图片&#xff0c;并将它们放在项目的合适目录下。编写 HTML 结构&#xff1…...

DeepSeek r1本地安装全指南

环境基本要求 硬件配置 需要本地跑模型&#xff0c;兼顾质量、性能、速度以及满足日常开发需要&#xff0c;我们需要准备以下硬件&#xff1a; CPU&#xff1a;I9内存&#xff1a;128GB硬盘&#xff1a;3-4TB 最新SSD&#xff0c;C盘确保有400GB&#xff0c;其它都可划成D盘…...

LitGPT - 20多个高性能LLM,具有预训练、微调和大规模部署的recipes

文章目录 一、关于 LitGPT二、快速启动安装LitGPT高级安装选项 从20多个LLM中进行选择 三、工作流程1、所有工作流程2、微调LLM3、部署LLM4、评估LLM5、测试LLM6、预训练LLM7、继续预训练LLM 四、最先进的功能五、训练方法示例 六、项目亮点教程 一、关于 LitGPT LitGPT 用于 …...

deepseek R1 14b显存占用

RTX2080ti 11G显卡&#xff0c;模型7b速度挺快&#xff0c;试试14B也不错。 7B显存使用5.6G&#xff0c;14B显存刚好够&#xff0c;出文字速度差不多。 打算自己写个移动宽带的IPTV播放器&#xff0c;不知道怎么下手&#xff0c;就先问他了。...

无用知识研究:对std::common_type以及问号表达式类型的理解

先说结论&#xff1a; 如果问号表达式能编译通过&#xff0c;那么std::common_type就能通过。因为common_type的底层依赖的就是?: common_type的实现里&#xff0c;利用了问号表达式&#xff1a;ternary conditional operator (?:) https://stackoverflow.com/questions/14…...

MapReduce概述

目录 1. MapReduce概述2. MapReduce的功能2.1 数据划分和计算任务调度2.2 数据/代码互定位2.3 系统优化2.4 出错检测和恢复 3. MapReduce处理流程4. MapReduce编程基础参考 1. MapReduce概述 MapReduce是面向大数据并行处理的计算模型、框架和平台:   1. 基于集群的高性能并行…...

循环神经网络(RNN)+pytorch实现情感分析

目录 一、背景引入 二、网络介绍 2.1 输入层 2.2 循环层 2.3 输出层 2.4 举例 2.5 深层网络 三、网络的训练 3.1 训练过程举例 1&#xff09;输出层 2&#xff09;循环层 3.2 BPTT 算法 1&#xff09;输出层 2&#xff09;循环层 3&#xff09;算法流程 四、循…...

Mac cursor设置jdk、Maven版本

基本配置 – Cursor 使用文档 首先是系统用户级别的设置参数&#xff0c;运行cursor&#xff0c;按下ctrlshiftp&#xff0c;输入Open User Settings(JSON)&#xff0c;在弹出的下拉菜单中选中下面这样的&#xff1a; 在打开的json编辑器中追加下面的内容&#xff1a; {"…...

WPS数据分析000005

目录 一、数据录入技巧 二、一维表 三、填充柄 向下自动填充 自动填充选项 日期填充 星期自定义 自定义序列 1-10000序列 四、智能填充 五、数据有效性 出错警告 输入信息 下拉列表 六、记录单 七、导入数据 ​编辑 八、查找录入 会员功能 Xlookup函数 VL…...

CTF从入门到精通

文章目录 背景知识CTF赛制 背景知识 CTF赛制 1.web安全:通过浏览器访问题目服务器上的网站&#xff0c;寻找网站漏洞(sql注入&#xff0c;xss&#xff08;钓鱼链接&#xff09;,文件上传&#xff0c;包含漏洞&#xff0c;xxe&#xff0c;ssrf&#xff0c;命令执行&#xff0c…...

Flutter使用Flavor实现切换环境和多渠道打包

在Android开发中通常我们使用flavor进行多渠道打包&#xff0c;flutter开发中同样有这种方式&#xff0c;不过需要在原生中配置 具体方案其实flutter官网个了相关示例&#xff08;https://docs.flutter.dev/deployment/flavors&#xff09;,我这里记录一下自己的操作 Android …...

Springboot如何使用面向切面编程AOP?

Springboot如何使用面向切面编程AOP? 在 Spring Boot 中使用面向切面编程&#xff08;AOP&#xff09;非常简单&#xff0c;Spring Boot 提供了对 AOP 的自动配置支持。以下是详细的步骤和示例&#xff0c;帮助你快速上手 Spring Boot 中的 AOP。 1. 添加依赖 首先&#xff…...

51单片机(STC89C52)开发:点亮一个小灯

软件安装&#xff1a; 安装开发板CH340驱动。 安装KEILC51开发软件&#xff1a;C51V901.exe。 下载软件&#xff1a;PZ-ISP.exe 创建项目&#xff1a; 新建main.c 将main.c加入至项目中&#xff1a; main.c:点亮一个小灯 #include "reg52.h"sbit LED1P2^0; //P2的…...

基于MinIO的对象存储增删改查

MinIO是一个高性能的分布式对象存储服务。Python的minio库可操作MinIO&#xff0c;包括创建/列出存储桶、上传/下载/删除文件及列出文件。 查看帮助信息 minio.exe --help minio.exe server --help …...

Ubuntu Server 安装 XFCE4桌面

Ubuntu Server没有桌面环境&#xff0c;一些软件有桌面环境使用起来才更加方便&#xff0c;所以我尝试安装桌面环境。常用的桌面环境有&#xff1a;GNOME、KDE Plasma、XFCE4等。这里我选择安装XFCE4桌面环境&#xff0c;主要因为它是一个极轻量级的桌面环境&#xff0c;适合内…...

MySQL 存储函数:数据库的自定义函数

在数据库开发中&#xff0c;存储函数&#xff08;Stored Function&#xff09;是一种非常有用的工具。它允许我们创建自定义的函数&#xff0c;这些函数可以在 SQL 查询中像内置函数一样使用&#xff0c;用于实现特定的逻辑和计算。本文将深入探讨 MySQL 存储函数的概念、与存储…...

代码随想录_栈与队列

栈与队列 232.用栈实现队列 232. 用栈实现队列 使用栈实现队列的下列操作&#xff1a; push(x) – 将一个元素放入队列的尾部。 pop() – 从队列首部移除元素。 peek() – 返回队列首部的元素。 empty() – 返回队列是否为空。 思路: 定义两个栈: 入队栈, 出队栈, 控制出入…...

【微服务与分布式实践】探索 Sentinel

参数设置 熔断时长 、最小请求数、最大RT ms、比例阈值、异常数 熔断策略 慢调⽤⽐例 当单位统计时⻓内请求数⽬⼤于设置的最⼩请求数⽬&#xff0c;并且慢调⽤的⽐例⼤于阈值&#xff0c;则接下来的熔断时⻓内请求会⾃动被熔断 异常⽐例 当单位统计时⻓内请求数⽬⼤于设置…...

深入研究异常处理机制

一、原理探究 C异常处理 本节内容针对 Linux 下的 C 异常处理机制&#xff0c;重点在于研究如何在异常处理流程中利用溢出漏洞&#xff0c;所以不对异常处理及 unwind 的过程做详细分析&#xff0c;只做简单介绍 异常机制中主要的三个关键字&#xff1a;throw 抛出异常&#x…...

【memgpt】letta 课程4:基于latta框架构建MemGpt代理并与之交互

Lab 3: Building Agents with memory 基于latta框架构建MemGpt代理并与之交互理解代理状态,例如作为系统提示符、工具和agent的内存查看和编辑代理存档内存MemGPT 代理是有状态的 agents的设计思路 每个步骤都要定义代理行为 Letta agents persist information over time and…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

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

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

6.计算机网络核心知识点精要手册

计算机网络核心知识点精要手册 1.协议基础篇 网络协议三要素 语法&#xff1a;数据与控制信息的结构或格式&#xff0c;如同语言中的语法规则语义&#xff1a;控制信息的具体含义和响应方式&#xff0c;规定通信双方"说什么"同步&#xff1a;事件执行的顺序与时序…...