预览图片插件 viewer.js在pc端使用

最新推荐文章于 2024-09-13 21:41:54 发布

Tangsze

最新推荐文章于 2024-09-13 21:41:54 发布

阅读量582

点赞数 2

分类专栏：前端文章标签： Viewer.js 图片预览轮播图前端开发 JavaScript库

本文链接：https://blog.csdn.net/Mytechnologe_2417/article/details/111942386

版权

前端专栏收录该内容

44 篇文章 1 订阅

订阅专栏

先看下效果
在这里插入图片描述

引入viewer.css和viewer.js文件

<link rel="stylesheet" href='//cdn.jsdelivr.net/npm/viewerjs@1.9.0/dist/viewer.min.css'></link>

<script src='//cdn.jsdelivr.net/npm/viewerjs@1.9.0/dist/viewer.min.js'></script>

<div class="review_article" id="review_article">
  <!-- <img class="article_img"  src='/bid-fileinter/image/bidfile_image.png?v={{Msg "seo" "version"}}' alt=""> -->
   <div id="new_inset_1" class="inset-swiper-box swiper-container" style="width: 890px;height: 500px;">
     <div class="swiper-wrapper">
         <div class="swiper-slide">
             <img src='{{Msg "seo" "cdn"}}/bid-fileinter/image/bidfile_index1.jpg?v={{Msg "seo" "version"}}' alt="" width="890" height="437"/>
         </div>
         <div class="swiper-slide">
             <img src='{{Msg "seo" "cdn"}}/bid-fileinter/image/bidfile_index2.jpg?v={{Msg "seo" "version"}}' alt="" width="890" height="437"/>
         </div>
         <div class="swiper-slide">
             <img src='{{Msg "seo" "cdn"}}/bid-fileinter/image/bidfile_index3.jpg?v={{Msg "seo" "version"}}' alt="" width="890" height="437"/>
         </div>
         <div class="swiper-slide">
             <img src='{{Msg "seo" "cdn"}}/bid-fileinter/image/bidfile_index4.jpg?v={{Msg "seo" "version"}}' alt="" width="890" height="437"/>
         </div>
     </div>
     <!-- Add Pagination -->
     <div class="swiper-pagination"></div>
   </div>
   <!-- Add Arrows -->
   <div class="jy-swiper-button-next swiper-button-next">
     <div class="icon-arrow--up white"></div>
   </div>
   <div class="jy-swiper-button-prev swiper-button-prev">
       <div class="icon-arrow--up white"></div>
   </div>
 </div>

// 点击图片预览
  new Viewer(document.getElementById('review_article'), {
    minZoomRatio: 0.3,
    toolbar: {
      zoomIn: 1,
      zoomOut: 1,
      oneToOne: 1,
      reset: 1,
      prev: 0,
      play: 0,
      next: 0,
      rotateLeft: 1,
      rotateRight: 1,
      flipHorizontal: 0,
      flipVertical: 0,
    }
  })