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

Vue.js组件开发-实现全屏焦点图片带图标导航按钮控制图片滑动切换

使用 Vue 实现全屏焦点图片带图标导航按钮控制图片滑动切换

步骤

  1. 创建 Vue 项目:可以使用 Vue CLI 快速创建一个新的 Vue 项目。
  2. 设计组件结构:创建一个包含图片展示区域和导航按钮的组件。
  3. 实现图片滑动切换逻辑:通过点击导航按钮切换图片。
  4. 样式设计:设置全屏布局和样式。

代码实现

1. 创建 Vue 项目

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

npm install -g @vue/cli

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

vue create fullscreen-slider
cd fullscreen-slider
2. 编写组件代码

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

<template><div class="fullscreen-slider"><!-- 图片展示区域 --><div class="slider-container"><!-- 遍历图片列表,显示当前图片 --><img:src="images[currentIndex]"alt="Slider Image"class="slider-image":key="currentIndex"/></div><!-- 导航按钮区域 --><div class="navigation-buttons"><!-- 上一张按钮 --><button @click="prevImage" class="nav-button"><i class="fas fa-chevron-left"></i></button><!-- 下一张按钮 --><button @click="nextImage" class="nav-button"><i class="fas fa-chevron-right"></i></button></div></div>
</template><script>
export default {name: 'FullscreenSlider',data() {return {// 图片列表,可根据需要添加更多图片链接images: ['https://via.placeholder.com/1920x1080?text=Image+1','https://via.placeholder.com/1920x1080?text=Image+2','https://via.placeholder.com/1920x1080?text=Image+3'],// 当前显示的图片索引currentIndex: 0};},methods: {// 切换到上一张图片prevImage() {// 如果当前索引大于 0,则将索引减 1if (this.currentIndex > 0) {this.currentIndex--;} else {// 如果当前索引为 0,则切换到最后一张图片this.currentIndex = this.images.length - 1;}},// 切换到下一张图片nextImage() {// 如果当前索引小于图片列表长度减 1,则将索引加 1if (this.currentIndex < this.images.length - 1) {this.currentIndex++;} else {// 如果当前索引为最后一张图片的索引,则切换到第一张图片this.currentIndex = 0;}}}
};
</script><style scoped>
/* 全屏滑块容器 */
.fullscreen-slider {position: relative;width: 100vw;height: 100vh;overflow: hidden;
}/* 图片容器 */
.slider-container {width: 100%;height: 100%;
}/* 图片样式 */
.slider-image {width: 100%;height: 100%;object-fit: cover;
}/* 导航按钮容器 */
.navigation-buttons {position: absolute;top: 50%;left: 0;right: 0;transform: translateY(-50%);display: flex;justify-content: space-between;padding: 0 20px;
}/* 导航按钮样式 */
.nav-button {background: rgba(0, 0, 0, 0.5);border: none;color: white;font-size: 24px;padding: 10px;cursor: pointer;border-radius: 5px;
}/* 导航按钮悬停效果 */
.nav-button:hover {background: rgba(0, 0, 0, 0.8);
}
</style>
3. 在 App.vue 中使用组件

打开 src/App.vue 文件,将代码替换为以下内容:

<template><div id="app"><!-- 使用 FullscreenSlider 组件 --><FullscreenSlider /></div>
</template><script>
// 引入 FullscreenSlider 组件
import FullscreenSlider from './components/FullscreenSlider.vue';export default {name: 'App',components: {FullscreenSlider}
};
</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 部分

    • <img> 标签用于显示当前图片,通过 :src 绑定图片链接。
    • <button> 标签用于创建导航按钮,通过 @click 绑定点击事件。
  • JavaScript 部分

    • data 函数返回一个对象,包含图片列表和当前图片索引。
    • prevImage 方法用于切换到上一张图片。
    • nextImage 方法用于切换到下一张图片。
  • CSS 部分

    • .fullscreen-slider 设置全屏布局和溢出隐藏。
    • .slider-image 设置图片填充整个容器。
    • .navigation-buttons 设置导航按钮的位置和样式。

使用说明

  1. 运行项目:在项目根目录下运行以下命令启动开发服务器:
npm run serve
  1. 修改图片:在 FullscreenSlider.vue 文件的 data 函数中,修改 images 数组,添加或替换图片链接。
  2. 样式调整:根据需要修改 FullscreenSlider.vue 文件中的 CSS 样式,调整布局和外观。

注意事项

  • 确保已经安装了 Font Awesome 图标库,用于显示导航按钮的图标。可以在 public/index.html 文件中添加以下代码引入:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

相关文章:

Vue.js组件开发-实现全屏焦点图片带图标导航按钮控制图片滑动切换

使用 Vue 实现全屏焦点图片带图标导航按钮控制图片滑动切换 步骤 创建 Vue 项目&#xff1a;可以使用 Vue CLI 快速创建一个新的 Vue 项目。设计组件结构&#xff1a;创建一个包含图片展示区域和导航按钮的组件。实现图片滑动切换逻辑&#xff1a;通过点击导航按钮切换图片。…...

Linux系统上安装与配置 MySQL( CentOS 7 )

目录 1. 下载并安装 MySQL 官方 Yum Repository 2. 启动 MySQL 并查看运行状态 3. 找到 root 用户的初始密码 4. 修改 root 用户密码 5. 设置允许远程登录 6. 在云服务器配置 MySQL 端口 7. 关闭防火墙 8. 解决密码错误的问题 前言 在 Linux 服务器上安装并配置 MySQL …...

Vue 3 30天精进之旅:Day 10 - Vue Router

在现代单页面应用&#xff08;SPA&#xff09;中&#xff0c;路由管理是必不可少的一部分。Vue Router是Vue.js官方的路由管理库&#xff0c;它使得在Vue应用中实现路由变得简单而灵活。今天的学习将围绕以下几个方面展开&#xff1a; Vue Router概述安装和基本配置定义路由路…...

人工智能如何驱动SEO关键词优化策略的转型与效果提升

内容概要 随着数字化时代的到来&#xff0c;人工智能&#xff08;AI&#xff09;技术对各行各业的影响日益显著&#xff0c;在搜索引擎优化&#xff08;SEO&#xff09;领域尤为如此。AI的应用不仅改变了关键词研究的方法&#xff0c;而且提升了内容生成和搜索优化的效率&…...

keil5如何添加.h 和.c文件,以及如何添加文件夹

1.简介 在hal库的编程中我们一般会生成如下的几个文件夹&#xff0c;在这几个文件夹内存储着各种外设所需要的函数接口.h文件&#xff0c;和实现函数具体功能的.c文件&#xff0c;但是有时我们想要创建自己的文件夹并在这些文件夹下面创造.h .c文件来实现某些功能&#xff0c;…...

BMC PSL function(22)-printf()

printf() 含义:Print text formatted to the C library printf() routine specification Format printf(format,[arg1,......,argn]) Parameter ParameterDefinitionformattext, variable names, and control characters that specify the content and format of output t…...

【数据结构】_复杂度

目录 1. 算法效率 2. 时间复杂度 2.1 时间复杂度概念 2.2 准确的时间复杂度函数式 2.3 大O渐进表示法 2.4 时间复杂度的常见量级 2.5 时间复杂度示例 3. 空间复杂度 3.1 空间复杂度概念 3.2 空间复杂度示例 1. 算法效率 一般情况下&#xff0c;衡量一个算法的好坏是…...

pytorch实现循环神经网络

人工智能例子汇总&#xff1a;AI常见的算法和例子-CSDN博客 PyTorch 提供三种主要的 RNN 变体&#xff1a; nn.RNN&#xff1a;最基本的循环神经网络&#xff0c;适用于短时依赖任务。nn.LSTM&#xff1a;长短时记忆网络&#xff0c;适用于长序列数据&#xff0c;能有效解决…...

Java 16进制 10进制 2进制数 相互的转换

在 Java 中&#xff0c;进行进制之间的转换时&#xff0c;除了功能的正确性外&#xff0c;效率和安全性也很重要。为了确保高效和相对安全的转换&#xff0c;我们通常需要考虑&#xff1a; 性能&#xff1a;使用内置的转换方法&#xff0c;如 Integer.toHexString()、Integer.…...

力扣动态规划-14【算法学习day.108】

前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;建议灵神的题单和代码随想录&#xff09;和记录自己的学习过程&#xff0c;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关…...

数据结构day02

1 线性表的定义和基本操作 1.1 线性表的定义 分析&#xff1a; 1.1.1 问题一&#xff1a;我们为什么探讨线性表的定义和基本操作 在研究数据结构时&#xff0c;需要重点关注三个方面&#xff1a;逻辑结构、物理结构以及数据的运算。在本节内容里&#xff0c;我们首先来介绍线…...

随笔 | 写在一月的最后一天

. 前言 这个月比预想中过的要快更多。突然回看这一个月&#xff0c;还有点不知从何提笔。 整个一月可以总结为以下几个关键词&#xff1a; 期许&#xff0c;保持期许出现休息 . 期许 关于期许&#xff0c;没有什么时候比一年伊始更适合设立目标和计划的了。但令人惭愧的…...

JVM方法区

一、栈、堆、方法区的交互关系 二、方法区的理解: 尽管所有的方法区在逻辑上属于堆的一部分&#xff0c;但是一些简单的实现可能不会去进行垃圾收集或者进行压缩&#xff0c;方法区可以看作是一块独立于Java堆的内存空间。 方法区(Method Area)与Java堆一样&#xff0c;是各个…...

一文读懂fgc之cms

一文读懂 fgc之cms-实战篇 1. 前言 线上应用运行过程中可能会出现内存使用率较高&#xff0c;甚至达到95仍然不触发fgc的情况&#xff0c;存在内存打满风险&#xff0c;持续触发fgc回收&#xff1b;或者内存占用率较低时触发了fgc&#xff0c;导致某些接口tp99&#xff0c;tp…...

MYSQL 商城系统设计 商品数据表的设计 商品 商品类别 商品选项卡 多表查询

介绍 在开发商品模块时&#xff0c;通常使用分表的方式进行查询以及关联。在通过表连接的方式进行查询。每个商品都有不同的分类&#xff0c;每个不同分类下面都有商品规格可以选择&#xff0c;每个商品分类对应商品规格都有自己的价格和库存。在实际的开发中应该给这些表进行…...

HTB:Administrator[WriteUP]

目录 连接至HTB服务器并启动靶机 信息收集 使用rustscan对靶机TCP端口进行开放扫描 将靶机TCP开放端口号提取并保存 使用nmap对靶机TCP开放端口进行脚本、服务扫描 使用nmap对靶机TCP开放端口进行漏洞、系统扫描 使用nmap对靶机常用UDP端口进行开放扫描 使用nmap对靶机…...

开源项目Umami网站统计MySQL8.0版本Docker+Linux安装部署教程

Umami是什么&#xff1f; Umami是一个开源项目&#xff0c;简单、快速、专注用户隐私的网站统计项目。 下面来介绍如何本地安装部署Umami项目&#xff0c;进行你的网站统计接入。特别对于首次使用docker的萌新有非常好的指导、参考和帮助作用。 Umami的github和docker镜像地…...

FBX SDK的使用:基础知识

Windows环境配置 FBX SDK安装后&#xff0c;目录下有三个文件夹&#xff1a; include 头文件lib 编译的二进制库&#xff0c;根据你项目的配置去包含相应的库samples 官方使用案列 动态链接 libfbxsdk.dll, libfbxsdk.lib是动态库&#xff0c;需要在配置属性->C/C->预…...

VisionMamba安装

1.安装python环境 conda create -n mamba python3.10.13 -y conda activate mamba2.安装torch环境 conda install cudatoolkit11.8 -c nvidia pip install torch2.1.1 torchvision0.16.1 torchaudio2.1.1 --index-url https://download.pytorch.org/whl/cu1183.安装其他包 c…...

h2oGPT

文章目录 一、关于 h2oGPT二、现场演示特点 三、开始行动安装h2oGPT拼贴画演示资源文档指南开发致谢为什么选择 H2O.ai&#xff1f;免责声明 一、关于 h2oGPT 使用文档、图像、视频等与本地GPT进行私人聊天。100%私人&#xff0c;Apache 2.0。支持oLLaMa、Mixtral、llama. cpp…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...