jQuery图片查看插件

 查看演示  website  立即下载

使用方法

引入css、js文件

<link rel="stylesheet" href="./css/pictureViewer.css">
<script src="js/pictureViewer.js"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></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插件的支持）
        });
    });
});

PREVIOUS:
NEXT:
jQuery 圆型进度条
纯CSS美化 单复选框(原创)