viewer万能的可放大缩小翻转切换上下件的图片预览插件

置顶 swagLi

已于 2024-05-13 09:34:52 修改

阅读量164

点赞数

分类专栏： vue、elementUI、音视频通信、echarts实战文章标签： css css3 前端

于 2024-05-11 14:35:20 首次发布

本文链接：https://blog.csdn.net/qq_41149508/article/details/138714504

版权

vue、elementUI、音视频通信、echarts实战专栏收录该内容

23 篇文章 42 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

`一、需求是上面展示一张大图，下面一排小图可以通过小图切换上面的大图，然后点击大图可以放大预览并可以左右切换上下件预览`

二、具体使用方式引入相关的js、css，用cdn的方式引入加载会更快些

<link href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.js"></script>

`注意事项：因为需要点击放大的时候可以左右切换其他小图的大图，所以我们需要提前准备好列表可以设置display：none页面看不到即可`

 <div id="image-gallery">
        <!-- 显示大图 -->
        <img id="big-image" src="https://imagecdn.chengxuan.com/images/2023a/mini-641-1.jpg">
        <!-- 隐藏的大图用于viewer.js预览 -->
        <div style="display:none;">
            <img src="https://imagecdn.chengxuan.com/images/2023a/mini-641-1.jpg&#