当前端轮播图遇上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 配置文件关联，打包即集成右键"打开方式"。

快速上手

克隆或下载本项目，进入项目目录。
安装依赖：
sh 复制代码
```
npm install
```
开发调试：
sh 复制代码
```
npm start
```
打包发布：
sh 复制代码
```
npm run dist
```
生成的 exe 安装包在 dist/ 目录。
安装后，右键任意图片，选择"用图片查看器打开"，即可享受丝滑体验。

目录结构

bash 复制代码

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

适用场景

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

最后

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

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