jQuery图片查看插件

查看演示立即下载

插件描述：jQuery图片查看插件，支持键盘交互和鼠标滚轮交互

使用方法

引入css、js文件

<link rel="stylesheet" href="./css/pictureViewer.css">
<script src="js/pictureViewer.js"></script>
<script src="/"></script>
<script src="./js/jquery.mousewheel.min.js"></script>
<script src="./js/pictureViewer.js"></script>

基本配置

$.pictureViewer({
   images: imagesArr, //需要查看的图片，数据类型为数组
   initImageIndex: 1, //初始查看第几张图片，默认1
   scrollSwitch: true //是否使用鼠标滚轮切换图片，默认false（此功能需要jquery.mousewheel插件的支持）
});

Demo

$(function() {
    $('.image-list').on('click', '.cover', function() {
        var this_ = $(this);
        var images = this_.parents('.image-list').find('.cover');
        var imagesArr = new Array();
        $.each(images, function(i, image) {
            imagesArr.push($(image).children('img').attr('src'));
        });
        $.pictureViewer({
            images: imagesArr, //需要查看的图片，数据类型为数组
            initImageIndex: this_.index() + 1, //初始查看第几张图片，默认1
            scrollSwitch: true //是否使用鼠标滚轮切换图片，默认false（此功能需要jquery.mousewheel插件的支持）
        });
    });
});

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：纯CSS美化单复选框(原创)
下一个特效： jQuery 圆型进度条