<script>
    document.all && document.execCommand("BackgroundImageCache", false, true);    var isIE = (document.all) ? true : false;    var $ = function(id) {
        return document.getElementById(id);
    };    var Extend = function(destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
    }    var Bind = function(object, fun, args) {
        return function() {
            return fun.apply(object, args || []);
        }
    }    var BindAsEventListener = function(object, fun) {
        var args = Array.prototype.slice.call(argumens).slice(2);
        return function(event) {
            return fun.apply(object, [event || window.event].concat(args));
        }
    }    var CurrentStyle = function(element) {
        return element.currentStyle || document.defaultView.getComputedStyle(element, null);
    }    var Tween = {
        Quart: {
            easeOut: function(t, b, c, d) {
                return -c * ((t = t / d - 1) * t * t * t - 1) + b;
            }
        }
    }    function create(elm, parent, fn) { var element = document.createElement(elm); fn && fn(element); parent && parent.appendChild(element); return element };
    function addListener(element, e, fn) { element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn) };
    function removeListener(element, e, fn) { element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn) };    var Class = function(properties) {
        var _class = function() { return (arguments[0] !== null && this.initialize && typeof (this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this; };
        _class.prototype = properties;
        return _class;
    };    var Imgroll = new Class({
        options: {
            Isrun: false,
            Step: 100,
            Time: 10,
            t: 0,
            b: 0,
            c: 0,
            d: 60,
            Tween: Tween.Quart.easeOut,
            Oninit: function() { },
            Onstart: function() { },
            Onstop: function() { }
        },
        initialize: function(obj, c, total, i, options) {
            this._obj = obj;
            this._c = c;
            this._total = total;    //显示区域有多少张图片
            this.i = i;        //聚焦于第i张图片
            this.timer = null;
            this.Isrun = this.options.isrun;
            this.Step = this.options.Step;
            this.Time = this.options.Time;
            this.t = this.options.t;
            this.b = this.options.b;
            this.c = this.options.c;
            this.d = this.options.d;
            this.Tween = this.options.Tween;
            this.Oninit = this.options.Oninit;
            this.Onstart = this.options.Onstart;
            this.Onstop = this.options.Onstop;
            Extend(this, options || {});
            var self = this, i = 0, img = this._c.getElementsByTagName('a');
            this._c.style.width = img.length * this.Step + 'px';
            for (; i < img.length; i++) {
                img[i].num = i;
                (function(i) {
                    addListener(img[i], 'click', Bind(self, self.Start, [img[i]]));
                })(i);
            }
        },
        Start: function(c) {
            if (this.Isrun) return;
            this.Isrun = true;
            var img = this._c.getElementsByTagName('a')
            this.b = this._obj.scrollLeft;
            c && (this.c = c.num < this.i ? (-1) * this.b : (c.num > img.length - (this._total - this.i + 1) - 1 ? (img.length - this._total) * this.Step - this.b : (c.num - this.i + 1) * this.Step - this.b));
            this.Onstart(c);
            if (this.c == 0) { this.Isrun = false; return; }
            this.Run();
        },
        Run: function() {
            if (this.t < this.d) {
                this.RunTo(Math.round(this.Tween(++this.t, this.b, this.c, this.d)))
                this.timer = setTimeout(Bind(this, this.Run), this.Time)
            }
            else {
                this.RunTo(this.b + this.c);
                this.Stop();
            }
        },
        RunTo: function(i) {
            this._obj.scrollLeft = i;
        },
        Pre: function() {
            this.c = this.Step * (-1);
            this.Start();
        },
        Next: function() {
            this.c = this.Step;
            this.Start();
        },
        Stop: function() {
            clearTimeout(this.timer);
            this.t = 0; this.Isrun = false;
            this.Onstop()
        }
    })    var ss = new Imgroll($('middle'), $('thumblist'), 9, 5, {
        Step: 102,
        Onstart: function(obj) {
            if (!obj) return;
            this.o && (this.o.className = '');
            this.o = obj;
            obj.className = 'cc';
        },
        Onstop: function() {
            $('left').style.backgroundPosition = this._obj.scrollLeft == 0 ? "0px 0px" : "-29px 0px";
            $('right').style.backgroundPosition = this._obj.scrollLeft == 816 ? "0px 0px" : "-29px 0px";
        } 
    });
    addListener($('right'), 'click', function() { ss.Next() });
    addListener($('left'), 'click', function() { ss.Pre() });
</script>