我的博客需要用到一个内容的图片预览插件，网上找了许多的插件，感觉要么太大，要么没有我想要的功能，所以后来想想还是自己写一个吧，大小10K，因为是用webpack打包的，把css都打包进去了，可以根据图片的大小，使用居中在屏幕中间。

使用方法：

首先实例化一个实例new ImgZooom({el: '.wrapper'})参数是一个对象,el的值可以是id、类、标签，他会根据你传的节点，来限制预览范围。

引入方式

  1. 直接引入js
  2. 通过import、require来导入js

首先说下直接引入js的:

直接引入js，会暴露一个全局的变量ImgZoom

<div class="wrapper">
  <p><img src="http://p3x5m4etk.bkt.clouddn.com/1525961919783cundgvimuy5" alt=""></p>
  <p><img src="http://p3x5m4etk.bkt.clouddn.com/1525965506130x60ht5q33ek" alt=""></p>
  <div><img src="http://p3x5m4etk.bkt.clouddn.com/1525967944576w7m43b4dhon" alt=""></div>
</div>

    new ImgZoom({
        el: '.wrapper'
    })

通过import、require来导入js:

    import ImgZoom from './img-zoom.js'; 
    //或者
    const ImgZoom = require('./img-zoom.js');

    //然后就可以通过定义的变量来实例一个实例化了,两种方式都是可以引入的。
    new ImgZoom({
        el: '.wrapper'
    })

下面放一张效果图来感受下：
轮播图插件

其实感觉还是有很多不足的地方，比如: 切换的时候没有转场动画，让人感觉很生硬的感觉，还有样式不够多，缩略图预览啊，自动播放啊，这些都可以加上去，我后面就是想通过插件的方式来把这些功能加上去。这样子就不会感觉这个插件很臃肿这样子。
如果有更好的想法，或者有bug的地方，欢迎大家在评论区留言，感谢大家的阅读。