当前端轮播图遇上Electron: 变身一款丝滑的 图片查看器

最近收集了不少优质的图片,这些图片数量太多;为了能够快速浏览,自动播放;不用一个个的点击,上次用html+JavaScript+css做了一个轮播图!

但是上次的轮播图还需要导入本地图片路径才能轮播;这次在上次的基础上,使用Electron包装下,竟然实现了一个win应用程序-图片查看器;直接在电脑上用该程序打开图片,就可以看图了!这里赶紧分享下!

项目简介

这是一款基于 Electron 打造的桌面图片查看器,支持 Windows 右键"用本应用打开"任意图片,自动浏览同目录下所有图片,支持上一张/下一张切换,还能一键轮播,以及调节轮播速度,体验如同刷短视频般顺滑!

主要功能

  • 右键即用:在资源管理器中右键图片,选择该"图片查看器"打开,无需拖拽、无需繁琐操作。
  • 自动识别同目录图片:自动识别并加载图片所在文件夹下所有图片。
  • 支持多种图片格式:支持 jpg、png、gif、bmp、webp 等主流格式。
  • 快捷切换:支持上一张、下一张切换,底部实时显示"当前/总数",让你不再迷失在图片海洋。
  • 轮播模式:一键自动播放,支持正序/倒序,速度随心调节,解放双手,享受视觉盛宴。
  • 美观 UI:现代化界面,暗色渐变背景,圆角卡片,操作按钮大而顺手,观感舒适。
  • 跨平台(理论上):主力支持 Windows,macOS 也能用(但右键集成需手动设置)。

技术亮点

  • Electron:桌面端跨平台神器,前端技术栈一把梭。
  • Node.js + fs:主进程自动遍历图片目录,图片列表一网打尽。
  • preload.js 安全桥:前后端通信,既安全又灵活。
  • 原生 IPC 通信:图片切换、窗口关闭等操作,主渲染进程无缝协作。
  • 自定义打包:electron-builder 配置文件关联,打包即集成右键"打开方式"。

快速上手

  1. 克隆或下载本项目,进入项目目录。

  2. 安装依赖:

    sh 复制代码
    npm install
  3. 开发调试:

    sh 复制代码
    npm start
  4. 打包发布:

    sh 复制代码
    npm run dist

    生成的 exe 安装包在 dist/ 目录。

  5. 安装后,右键任意图片,选择"用 图片查看器 打开",即可享受丝滑体验。

目录结构

bash 复制代码
图片查看器/
├── main.js         # Electron 主进程,负责窗口和图片列表逻辑
├── preload.js      # 预加载脚本,安全桥梁
├── carousel.html   # 轮播图主界面
├── package.json    # 项目配置与打包脚本
├── README.md       # 你正在看的这份说明
└── ...             # 其它资源

适用场景

  • 看壁纸、美图、批量预览摄影作品
  • 批量快速预览本地图片

最后

我把完整代码放到网盘了;里面还有往期的小demo;喜欢的可以下载体验下面是获取方法
---

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam8 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8509 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的10 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀11 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
前端工作日常11 小时前
平台价值与用户规模的共生关系
electron·测试·puppeteer
NUC_Dodamce12 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
阿夹克斯12 小时前
告别Vite脚手架局限!MixOne Beta测试招募:你的需求,我们来实现
electron
JSON_L12 小时前
Vue 电影导航组件
前端·javascript·vue.js