分享一款基于jqery的带3D切换效果的图片展示

　　先看效果：在线演示。

　　这个效果并不是我想出来的，我只是对某个开源的flash图片展示（请原谅我并不知道原作的链接……）使用js重写罢了。

　　起因是，我所在学校的网站（相思湖网站）要进行改版，其中各专题首页需要一个图片展示。某成员找到了一个带3D切换效果的图片展示，可惜是flash做的，并且在使用的过程中有一个问题，如果图片的宽高与原始定义的不同，就会出现一个固定的白框。

　　当时我的第一反应就是为什么要flash？难道js做不到么？话虽如此，但如果可以改改代码就能解决的话，倒也省事。终归我过于乐观了，尽管as和js是近亲，我却总抓不住问题的关键所在，一部分是因为对flash的不熟悉，令一部分也因为那as代码写得也够凌乱的。总之我决定了要用js重写。

　　仔细想想这个效果并不很难实现，借助jquery的animation可以轻松实现节点元素的各种动画，唯一的难点是确定图片的位置而已了。

　　我是利用等比对折来确定图片的位置：　　

　　

　　假设整个框架的长度是W，高度是H，图片的长为w，高为h。那么居中的图片的top为(H - h) / 2，left为(W - w) / 2，旁边图片的计算方法类同。

　　源代码：

/*
 * xsh slider for jquery
 * By: QiuXiang, qiuxiang55aa@gmail.com
 * Used In: http://xsh.gxun.edu.cn
 *
 * Copyright 2012, XSH
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
(function($){
    $.fn.xsh_slider = function(options){
        var opts = $.extend({}, $.fn.xsh_slider.defawrapts, options);
        var $this = $(this);
        var wrap = $('ul', $this);
        var imgs = [];
        var current = 1;
        var pre_img;
        var cur_img;
        var next_img;
        var timeout;

        init();

        function pre()
        {
            unbind_click();

            next_img.li.removeClass('next_img');
            cur_img.li.removeClass('cur_img');
            pre_img.li.removeClass('pre_img');

            current = (current == 0 ? imgs.length - 1 : current - 1);
            var pre_i = (current == 0 ? imgs.length - 1 : current - 1);
            var _next_img = next_img;
            next_img = cur_img;
            cur_img = pre_img;
            pre_img = imgs[pre_i];

            next_img.li.addClass('next_img');
            cur_img.li.addClass('cur_img');
            pre_img.li.addClass('pre_img');

            // 动画切换
            next_hide(_next_img);
            goto_next(next_img);
            goto_cur(cur_img);
            pre_init(pre_img);
            goto_pre(pre_img);

            alt_hide(next_img);
            alt_show(cur_img);

            bind_click();
            timeout_reset();
        }

        // 切换下一张图片
        function next()
        {
            unbind_click();

            pre_img.li.removeClass('pre_img');
            cur_img.li.removeClass('cur_img');
            next_img.li.removeClass('next_img');

            current = ((current == imgs.length - 1) ? 0 : current + 1);
            var next_i = (current == imgs.length - 1) ? 0 : current + 1;
            var _pre_img = pre_img;
            pre_img = cur_img;
            cur_img = next_img;
            next_img = imgs[next_i];

            pre_img.li.addClass('pre_img');
            cur_img.li.addClass('cur_img');
            next_img.li.addClass('next_img');

            // 动画切换
            pre_hide(_pre_img);
            goto_pre(pre_img);
            goto_cur(cur_img);
            next_init(next_img);
            goto_next(next_img);

            alt_hide(pre_img);
            alt_show(cur_img);

            bind_click();
            timeout_reset();
        }

        // pre_img 的消逝
        function pre_hide(img)
        {
            img.li.animate({
                 0,
                height: 0,
                left: 0,
                top: opts.height / 2,
                opacity: 0
            }, {
                duration: opts.speed,
                easing: 'easeOutExpo',
                queue: false
            });
        }

        // next_img 的消逝
        function next_hide(img)
        {
            img.li.animate({
                 0,
                height: 0,
                left: opts.width,
                top: opts.height / 2,
                opacity: 0
            }, {
                duration: opts.speed,
                easing: 'easeOutExpo',
                queue: false
            });
        }

        // 切换到 pre_img
        function goto_pre(img)
        {
            img.li.animate({
                 img.pre.width,
                height: img.pre.height,
                left: img.pre.left,
                top: img.pre.top,
                opacity: 1
            }, {
                duration: opts.speed,
                easing: 'easeOutExpo',
                queue: false
            });
        }

        // 切换到 cur_img
        function goto_cur(img)
        {
            img.li.animate({
                 img.center.width,
                height: img.center.height,
                left: img.center.left,
                top: img.center.top,
                opacity: 1
            }, {
                duration: opts.speed,
                easing: 'easeOutExpo',
                queue: false
            });
        }

        // 切换到 next_img
        function goto_next(img)
        {
            img.li.animate({
                 img.next.width,
                height: img.next.height,
                left: img.next.left,
                top: img.next.top,
                opacity: 1
            }, {
                duration: opts.speed,
                easing: 'easeOutExpo',
                queue: false
            });
        }

        // 绑定图片的点击切换事件
        function bind_click()
        {
            $('.pre_img', $this).click(function(){
                pre();
                return false;
            });
            $('.next_img', $this).click(function(){
                next();
                return false;
            });
        }
        
        // 取消绑定图片的点击切换事件
        function unbind_click()
        {
            $('.pre_img').unbind();
            $('.next_img').unbind();
        }

        // 重置自动播放
        function timeout_reset()
        {
            clearInterval(timeout);
            auto_play();
        }

        // 显示图片说明
        function alt_show(img)
        {
            if (img.div.text() != '')
                img.div.css({'display': 'block'});
        }

        // 隐藏图片说明
        function alt_hide(img)
        {
            img.div.css({'display': 'none'});
        }

        // 创建图片切换按钮
        function btn_create()
        {
            wrap.append('<div class="btn_pre"><a>' + opts.pre_text + '</a></div>');
            wrap.append('<div class="btn_next"><a>' + opts.next_text + '</a></div>');

            var btn_pre = $('.btn_pre', $this);
            var btn_next = $('.btn_next', $this);

            btn_pre.css({'top': (opts.height - btn_pre.height()) / 2});
            btn_next.css({'top': (opts.height - btn_next.height()) / 2});

            btn_pre.click(function(){
                pre();
            });
            btn_next.click(function(){
                next();
            });
        }


        // 作为上一个图片
        function as_pre(img)
        {
            img.li.css({
                'width': img.pre.width,
                'height': img.pre.height,
                'left': img.pre.left,
                'top': img.pre.top,
                'opacity': 1
            });
        }

        // 作为当前图片
        function as_cur(img)
        {
            img.li.css({
                'width': img.center.width,
                'height': img.center.height,
                'left': img.center.left,
                'top': img.center.top,
                'opacity': 1
            });
        }

        // 作为下一个图片
        function as_next(img)
        {
            img.li.css({
                'width': img.next.width,
                'height': img.next.height,
                'left': img.next.left,
                'top': img.next.top,
                'opacity': 1
            });
        }

        // 下一个图片出现的初始化
        function next_init(img)
        {
            img.li.css({
                'width': 0,
                'height': 0,
                'left': opts.width,
                'top': opts.height / 2,
                'opacity': 0
            });
        }

        // 上一个图片出现的初始化
        function pre_init(img)
        {
            img.li.css({
                'width': 0,
                'height': 0,
                'left': 0,
                'top': opts.height / 2,
                'opacity': 0
            });
        }

        // 图片初始化
        function img_init()
        {
            // 遍历图片，创建图片状态缓存
            $('li', $this).each(function(){
                var _this = $(this);
                var img = $('img', _this);
                var alt = img.attr('alt') || '';
                var width = img.width();
                var height = img.height();

                _this.append('<div class="alt"><p>' + alt + '</p></div>');
                imgs.push({
                    img: img,
                    li: _this,
                    div: $('div', _this),
                    center: {
                         width,
                        height: height,
                        left: (opts.width - width) / 2,
                        top: (opts.height - height) / 2
                    },
                    pre: {
                         width / 2,
                        height: height / 2,
                        left: (opts.width - width) / 4,
                        top: opts.height / 2 - height / 4
                    },
                    next: {
                         width / 2,
                        height: height / 2,
                        left: opts.width * 3 / 4- width / 4,
                        top: opts.height / 2 - height / 4
                    }
                });
                img.width('100%').height('100%');
            });

            pre_img = imgs[0];
            cur_img = imgs[1];
            next_img = imgs[2];
            current = 1;

            pre_img.li.addClass('pre_img');
            cur_img.li.addClass('cur_img');
            next_img.li.addClass('next_img');

            as_pre(pre_img);
            as_cur(cur_img);
            as_next(next_img);

            pre_img.li.show();
            cur_img.li.show();
            next_img.li.show();
            alt_show(cur_img);
        }

        function wrap_init()
        {
            wrap.addClass('xsh_slider');
            wrap.css({
                'width': opts.width,
                'height': opts.height
            });
        }

        // 自动播放
        function auto_play()
        {
            if (opts.auto)
            {
                timeout = setInterval(function(){
                    next();
                }, opts.delay);
            }
        }

        // 初始化
        function init()
        {
            wrap_init();
            btn_create();
            img_init();
            bind_click();
            auto_play();
            mousewheel();
        }

        // 鼠标滚轮事件
        function mousewheel()
        {
            wrap.mousewheel(function(event, delta, deltaX, deltaY){
                if (delta > 0)
                    next();
                else
                    pre();

                return false;
            });
        }
    };

    // 默认参数
    $.fn.xsh_slider.defawrapts = {
        pre_text: '<',
        next_text: '>',
         960,
        height: 400,
        speed: 500,
        delay: 5000,
        auto: true
    };

    // 阻尼动画切换效果
    $.extend(
        $.easing, {
            easeOutExpo: function (x, t, b, c, d) {
                return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
            }
        }
    );
})(jQuery);

// 引用的鼠标滚轮 jquery 插件
/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
 * Licensed under the MIT License (LICENSE.txt).
 *
 * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
 * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
 * Thanks to: Seamus Leahy for adding deltaX and deltaY
 *
 * Version: 3.0.6
 *
 * Requires: 1.2.2+
 */
(function($){
    var types = ['DOMMouseScroll', 'mousewheel'];

    if ($.event.fixHooks) {
        for ( var i=types.length; i; ) {
            $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
        }
    }

    $.event.special.mousewheel = {
        setup: function() {
            if ( this.addEventListener ) {
                for ( var i=types.length; i; ) {
                    this.addEventListener( types[--i], handler, false );
                }
            } else {
                this.onmousewheel = handler;
            }
        },

        teardown: function() {
            if ( this.removeEventListener ) {
                for ( var i=types.length; i; ) {
                    this.removeEventListener( types[--i], handler, false );
                }
            } else {
                this.onmousewheel = null;
            }
        }
    };

    $.fn.extend({
        mousewheel: function(fn) {
            return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
        },

        unmousewheel: function(fn) {
            return this.unbind("mousewheel", fn);
        }
    });

    function handler(event) {
        var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
        event = $.event.fix(orgEvent);
        event.type = "mousewheel";

        // Old school scrollwheel delta
        if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
        if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }

        // New school multidimensional scroll (touchpads) deltas
        deltaY = delta;

        // Gecko
        if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
            deltaY = 0;
            deltaX = -1*delta;
        }

        // Webkit
        if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
        if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }

        // Add event and delta to the front of the arguments
        args.unshift(event, delta, deltaX, deltaY);

        return ($.event.dispatch || $.event.handle).apply(this, args);
    }

})(jQuery);

.xsh_slider {
    padding: 0;
    list-style: none;
    overflow: hidden;
    position: relative;
}
.xsh_slider li {
    position: absolute;
    overflow: hidden;
    opacity: 0;
    filter: alpha(opacity = 0);
}
.xsh_slider .alt {
    position: absolute;
    bottom: 0;
    display: none;
}
.xsh_slider img {
    border: none;
}
.xsh_slider .pre_img, .xsh_slider .next_img {
    z-index: 1;
    cursor: pointer;
}
.xsh_slider .cur_img {
    z-index: 2;
}
.xsh_slider .btn_pre, .xsh_slider .btn_next {
    position: absolute;
    cursor: pointer;
}
.xsh_slider .btn_pre {
    left: 0;
}
.xsh_slider .btn_next {
    right: 0;
}

　　惭愧的说，代码写得不怎么样，纯粹面向过程写法。

　　最后附上下载：xsh_slide.7z