picEyes 是一个简单、轻量级的 jQuery 画廊/图像查看器插件,用于以全屏模式呈现图像。该插件在模态样式的完整浏览器窗口弹出窗口中显示放大的图像, 用户可以通过单击导航箭头和底部缩略图在它们之间导航。还支持无限循环。
使用方法
1. 将 jQuery 库和 jQuery picEyes 插件放在 html 页面的底部。
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script> <script src="js/jquery.picEyes.js"></script>
2. 将要呈现的图像添加到 html 无序列表中,如下所示。
<ul class="clearfix demo"> <li> <img src="images/1.jpg" /></li> <li> <img src="images/2.jpg" /></li> <li> <img src="images/3.jpg" /></li> <li> <img src="images/4.jpg" /></li> <li> <img src="images/5.jpg" /></li> <li> <img src="images/6.jpg" /></li> </ul>
3. picEyes初始化
<script> $(function () { //picturesEyes($('.demo li')); $('.demo li').picEyes(); }); </script>