js图片查看器插件用法示例

下面是关于"js图片查看器插件用法示例"的完整攻略：

一、插件介绍

js图片查看器插件是一款轻量级的JavaScript插件，可以将多张图片以相册形式展示，支持放大、缩小、上一张、下一张等功能。

二、使用步骤

1. 引入插件文件

<!-- 引入CSS文件 -->
<link rel="stylesheet" href="js-image-viewer.min.css">

<!-- 引入js文件 -->
<script src="js-image-viewer.min.js"></script>

2. HTML结构

<div id="image-viewer">
  <ul>
    <li><img src="img1.jpg" alt="image1"></li>
    <li><img src="img2.jpg" alt="image2"></li>
    <li><img src="img3.jpg" alt="image3"></li>
    <li><img src="img4.jpg" alt="image4"></li>
  </ul>
</div>

3. 调用插件

<script>
  //实例化图片查看器
  var viewer = new ImageViewer(document.getElementById('image-viewer'));

  //绑定打开事件
  document.getElementById('open').addEventListener('click', function () {
    viewer.show();
  });

  //绑定关闭事件
  document.getElementById('close').addEventListener('click', function () {
    viewer.hide();
  });
</script>

4. 代码说明

• 引入文件：首先引入CSS和JS文件；
• HTML结构：在指定的div中加入ul和img标签；
• 调用插件：利用实例化方法，对图片查看器进行相关操作，如打开和关闭。

三、示例说明

1. 示例一

假设我们有一个页面，用户需要点击一个按钮才能打开图片查看器，可以按照下面的方式编写代码：

<button id="open">打开图片</button>
<button id="close">关闭图片</button>

<div id="image-viewer">
  <ul>
    <li><img src="img1.jpg" alt="image1"></li>
    <li><img src="img2.jpg" alt="image2"></li>
    <li><img src="img3.jpg" alt="image3"></li>
    <li><img src="img4.jpg" alt="image4"></li>
  </ul>
</div>

<script>
  var viewer = new ImageViewer(document.getElementById('image-viewer'));

  document.getElementById('open').addEventListener('click', function () {
    viewer.show();
  });

  document.getElementById('close').addEventListener('click', function () {
    viewer.hide();
  });
</script>

这样用户就需要点击打开图片按钮才能查看图片。

2. 示例二

如果我们希望用户鼠标经过图片时可以自动弹出图片查看器，可以按照下面的方式编写代码：

<div id="image-viewer">
  <ul>
    <li><a href="img1.jpg"><img src="img1.jpg" alt="image1"></a></li>
    <li><a href="img2.jpg"><img src="img2.jpg" alt="image2"></a></li>
    <li><a href="img3.jpg"><img src="img3.jpg" alt="image3"></a></li>
    <li><a href="img4.jpg"><img src="img4.jpg" alt="image4"></a></li>
  </ul>
</div>

<script>
  var viewer = new ImageViewer(document.getElementById('image-viewer'));

  var imgs = document.querySelectorAll("#image-viewer img");

  var len = imgs.length;

  for (var i = 0; i < len; i++) {

    imgs[i].addEventListener('mouseover', function (e) {

      viewer.show(e.currentTarget.getAttribute('src'));

    });

    imgs[i].addEventListener('mouseout', function (e) {

      viewer.hide();

    });

  }
</script>

这样，当用户鼠标经过图片时，图片查看器会自动显示出来。

至此，“js图片查看器插件用法示例”的完整攻略结束。