www

;(function(global) {
    // 通用工具
    var util = {
        addListener : function(dom, eventName, callback, options) {
            options = options || {};
            if (dom.attachEvent) {
                dom.attachEvent('on' + eventName, callback);
            } else {
                dom.addEventListener(eventName, callback, options.capture || false);
            }
        }
    };
    // ReelingCam class
    var ReelingCam = function(options) {
        // 保证了构造函数的强制调用
        if (!(this instanceof arguments.callee)) {
            return new arguments.callee(options);
        }
        this.options = options;
        this.reelup = options.reelup;
        this.reeldown = options.reeldown;
        this.reelplay2 = options.reelplay2;
        // 可以自定义滚动图片源，也可以使用默认的data-images值
        this.pageList = options.pageList || this.reelplay2.getAttribute('data-images').split(',');
        // 缓存图片个数
        this.pagelen = this.pageList.length;
        // 默认起始页
        this.startpage = parseInt(this.reelplay2.getAttribute('data-frames')) || this.pagelen;
        // 定时任务
        this.task = null;
        //
        this.callback = null;

    }
    ReelingCam.prototype = {
        constructor : ReelingCam,
        _pagedown : function() {
            this.startpage = (this.startpage + 1) % this.pagelen;
            this.reelplay2.setAttribute('src', this.pageList[this.startpage]);
            if (this.startpage == this.pagelen - 1) {
                clearInterval(this.task);
                this.task = null;
                this.callback();
            }

        },
        _pageup : function() {
            this.startpage = (this.startpage + this.pagelen - 1) % this.pagelen;
            this.reelplay2.setAttribute('src', this.pageList[this.startpage]);
            if (this.startpage == 0) {
                clearInterval(this.task);
                this.task = null;
                this.callback();
            }

        },
        doReel : function(direction, callback) {
            var me = this;
            me.callback = callback;
            if (direction == 'up') {
                me.task = setInterval(function() {
                    me._pageup();
                }, 50);
            } else if (direction == 'down') {
                me.task = setInterval(function() {
                    me._pagedown();
                }, 50);
            }
        },
        bindEvent : function() {
            var me = this;
            util.addListener(me.reelup, 'click', function() {
                me.reelup.style.display = 'none';
                me.doReel('up', function() {
                    me.reeldown.style.display = '';
                })
            })
            util.addListener(me.reeldown, 'click', function() {
                me.reeldown.style.display = 'none';
                me.doReel('down', function() {
                    me.reelup.style.display = '';
                })
            });
        }
    }

    var reelingCam = ReelingCam({
        reelup : document.getElementById('reelup'),
        reeldown : document.getElementById('reeldown'),
        reelplay2 : document.getElementById('reelplay2')
    });
    reelingCam.bindEvent();

})(window);