超炫的图片画廊效果JS实现

<div id="portfolio">
        <div id="background"></div>
        <div class="arrows">
            <a href="#" class="up"></a>
            <a href="#" class="down"></a>
            <a href="#" class="prev"></a>
            <a href="#" class="next"></a>
        </div>
        <div class="gallery">
            <div class="inside">
                <div class="item">
                    <div><img src="images/1.jpg" alt="image1" />
                    </div>
                    <div><img src="images/2.jpg" alt="image2" />
                    </div>
                    <div><img src="images/3.jpg" alt="image3" />
                    </div>
                </div>
                <div class="item">
                    <div><img src="images/4.jpg" alt="image4" />
                    </div>
                    <div><img src="images/5.jpg" alt="image5" />
                    </div>
                </div>
                <div class="item">
                    <div><img src="images/6.jpg" alt="image6" />
                    </div>
                    <div><img src="images/7.jpg" alt="image7" />
                    </div>
                    <div><img src="images/8.jpg" alt="image8" />
                    </div>
                    <div><img src="images/9.jpg" alt="image9" />
                    </div>
                    <div><img src="images/10.jpg" alt="image10" />
                    </div>
                    <div><img src="images/11.jpg" alt="image11" />
                    </div>
                </div>
                <div class="item">
                    <div><img src="images/12.jpg" alt="image12" />
                    </div>
                    <div><img src="images/13.jpg" alt="image13" />
                    </div>
                    <div><img src="images/14.jpg" alt="image14" />
                    </div>
                    <div><img src="images/15.jpg" alt="image15" />
                    </div>
                </div>
            </div>
        </div>
    </div>

( function($) {
        $.fn.portfolio = function(options) {
            var d = {
                image : {
                    width : 600,
                    height : 400,
                    margin : 20
                },
                path : {
                    width : 10,
                    height : 10,
                    marginTop : 5,
                    marginLeft : 5
                },
                animationSpeed : 500
            };
            // default settings

            var s = $.extend({}, d, options);
            var colAll, col_Div = [0, 0, 0, 0, 0];

            return this.each(function() {
                var $t = $(this), plugin = {
                    init : function() {
                        this.setPosition();
                        this.paths.draw();
                        this.paths.go();
                        this.animate.item();
                    },
                    setPosition : function() {
                        var cnt = 0;
                        $t.find(‘.item‘).each(function(i) {
                            $(this).css({
                                left : (s.image.width + s.image.margin) * i + ‘px‘
                            });
                            $(this).find(‘div‘).each(function(j) {
                                $(this).css({
                                    top : (s.image.height + s.image.margin) * j + ‘px‘
                                });
                                col_Div[cnt]++;
                            });
                            cnt++;
                        });
                        colAll = cnt;
                    },
                    paths : {
                        draw : function() {
                            $t.append($(‘<div />‘).addClass(‘paths‘));
                            var path = $t.find(‘.paths‘);
                            $t.find(‘.item‘).each(function(i) {
                                path.append($(‘<div />‘).addClass(‘‘ + i).css({
                                    width : s.path.width + ‘px‘,
                                    left : (s.path.width + s.path.marginLeft) * i + ‘px‘
                                }));
                                $(this).find(‘div‘).each(function(j) {
                                    $(‘<a />‘).attr({
                                        href : ‘#‘,
                                        rel : j
                                    }).css({
                                        width : s.path.width + ‘px‘,
                                        height : s.path.height + ‘px‘,
                                        top : (s.path.height + s.path.marginTop) * j + ‘px‘
                                    }).appendTo(path.find(‘.‘ + i))
                                });
                            });
                            path.find(‘.0‘).find(‘a‘).eq(0).addClass(‘active‘);
                        },
                        go : function() {
                            $t.find(‘.paths‘).find(‘a‘).click(function() {
                                var all = $t.find(‘.paths‘).find(‘a‘);
                                var column = $(this).parent(‘div‘).attr(‘class‘), row = $(this).attr(‘rel‘);
                                var top = row * (s.image.height + s.image.margin), left = column * (s.image.width + s.image.margin);
                                $t.find(‘.inside‘).animate({
                                    top : -top + ‘px‘,
                                    left : -left + ‘px‘
                                }, s.animationSpeed, function() {
                                    plugin.position.get($t.find(‘.inside‘));
                                });
                                return false;
                            });
                        },
                        classes : function(column, row) {
                            var anchors = $t.find(‘.paths‘).find(‘a‘).removeClass(‘active‘);
                            var anchor = anchors.filter(function() {
                                var t = $(this), col = parseInt(t.parent(‘div‘).attr(‘class‘)), r = parseInt(t.attr(‘rel‘));
                                // console.log(row);
                                return col == column && r == row;
                            });
                            anchor.addClass(‘active‘);
                        }
                    },
                    animate : {
                        item : function() {
                            var down = {
                                dir : 0,
                                top : ‘-=‘ + (s.image.height + s.image.margin) + ‘px‘
                            }, up = {
                                dir : 0,
                                top : ‘+=‘ + (s.image.height + s.image.margin) + ‘px‘
                            }, next = {
                                dir : 1,
                                top : 0,
                                left : ‘-=‘ + (s.image.width + s.image.margin) + ‘px‘
                            }, prev = {
                                dir : -1,
                                top : 0,
                                left : ‘+=‘ + (s.image.width + s.image.margin) + ‘px‘
                            }
                            plugin.animate.img(‘.down‘, down, 40);
                            plugin.animate.img(‘.up‘, up, 38);
                            plugin.animate.img(‘.next‘, next, 39);
                            plugin.animate.img(‘.prev‘, prev, 37);
                        },
                        img : function(element, object, key) {
                            var inside = $t.find(‘.inside‘), type = $.browser.mozilla ? ‘keypress‘ : ‘keydown‘;
                            $(element).click(function() {
                                if ($(element).is(‘:visible‘) && !inside.is(‘:animated‘)) {
                                    if (object.dir != 0) {
                                        var pos = plugin.position.get(inside);
                                        if (col_Div[pos.col + object.dir] < pos.row + 1)
                                            object.top = -(col_Div[pos.col + object.dir] - 1) * (s.image.height + s.image.margin) + ‘px‘;
                                        else
                                            object.top = -pos.row * (s.image.height + s.image.margin) + ‘px‘;
                                    }
                                    console.log("next", object.left)
                                    inside.animate(object, s.animationSpeed, function() {
                                        plugin.position.get(inside);
                                    });
                                }
                                return false;
                            });
                            $(document).bind(type, function(e) {
                                var code = e.keyCode ? e.keyCode : e.which;
                                if (code == key && $(element).is(‘:visible‘)) {
                                    if (!inside.is(‘:animated‘)) {
                                        inside.animate(object, s.animationSpeed, function() {
                                            plugin.position.get(inside);
                                        });
                                    }
                                }
                                return false;
                            });

                        }
                    },
                    position : {

                        get : function(element) {
                            var top = Math.floor(element.position().top), left = Math.floor(element.position().left);
                            var rank = plugin.position.check(top, left);
                            return {
                                "top" : top,
                                "left" : left,
                                "col" : rank.col,
                                "row" : rank.row
                            };
                        },
                        check : function(top, left) {
                            top = ($.browser.msie && parseInt($.browser.version) == 8 && top != 0) ? top - 1 : top;
                            var items = $t.find(‘.item‘), size_left = items.length - 1, max_left = Math.floor(-size_left * (s.image.width + s.image.margin)), column = Math.ceil(left * size_left / max_left);
                            // get current item
                            var current = items.filter(function() {
                                return parseInt($(this).css(‘left‘)) == -left;
                            });
                            var size_top = current.find(‘div‘).length - 1, max_top = Math.floor(-size_top * (s.image.height + s.image.margin)), row = Math.ceil(top * size_top / max_top);
                            var arrows = $t.find(‘.arrows‘), up = arrows.find(‘.up‘), down = arrows.find(‘.down‘), next = arrows.find(‘.next‘), prev = arrows.find(‘.prev‘);

                            // show bottom
                            (left == max_left) ? next.hide() : next.show();
                            (left < 0) ? prev.show() : prev.hide();
                            (top == max_top) ? down.hide() : down.show();
                            (top < 0) ? up.show() : up.hide();

                            // active paths
                            plugin.paths.classes(column, row);
                            return {
                                "row" : row,
                                "col" : column
                            };
                        }
                    }
                }
                plugin.init();
            });
        };
    }(jQuery));

$(function() {
    $(‘#portfolio‘).portfolio({});
});