[Javascript][Prototype]无间隔循环滚动图片(imgLoopView)

/******************************
*                             *
*   Name:   imgLoopView       *
*   Author: Aken li           *
*   Date:   2008.07.10        *
*   Blog:   www.kxbd.com      *
*                             *
******************************/
var imgLoopView = Class.create();
imgLoopView.prototype = {
    initialize:function(id,direction){
        this.step = 1;
        this.interval = 0.01;
        this.gap = 10;//图片之间的间隔
        this.direction = direction || "Left";
        this.scrollId;
        this.oA = $(id);//遮罩
        this.o1;//滚动内容
        this.o2;//滚动内容克隆
        this.maskW = this.oA.getWidth();//遮罩的宽度，由style里的width获得
        this.scrollW = 0; //滚动元素的总宽度
        this.init();
    },

    init:function(){
        this.render();
        this.start();
        this.oA.observe("mouseover",this.stop.bind(this));
        this.oA.observe("mouseout",this.start.bind(this));
        this.oA.observe("mouseover",this.imgOver);
        this.oA.observe("mouseout",this.imgOut);
    },

    render:function(){
        this.oA.insert(new Element("ul"));
        this.o1 = this.oA.down();
        this.o2 = this.o1.next();

        this.o1.setStyle({
            left:"0px"
        });
        this.o1.childElements().each(function(o,i){
            var oW = o.getWidth();
            o.setStyle({
                position:"absolute",
                left:this.scrollW+"px"
            })
            this.scrollW += this.gap+oW;
        }.bind(this));
        this.o2.innerHTML = this.o1.innerHTML;
        this.o2.setStyle({
            left:this.scrollW+"px"
        });
    },

    start:function() {
        if(!this.scrollId){
            if (this.direction == "Left"){
                this.scrollId = new PeriodicalExecuter(this.moveLeft.bind(this,this.step), this.interval);
            }else{
                this.scrollId = new PeriodicalExecuter(this.moveRight.bind(this,this.step), this.interval);
            }
        }
    },

    stop:function() {
        if(this.scrollId){
            this.scrollId.stop();
            this.scrollId = 0;
        }
    },

    toggle:function() {
        this.scrollId?this.stop():this.start();
    },

    goLeft:function() {
        this.direction = "Left";
        this.stop();
        this.start();
    },

    goRight:function() {
        this.direction = "Right";
        this.stop();
        this.start();
    },

    toggleDir:function() {
        this.direction=="Left"?this.goRight():this.goLeft();
    },

    moveLeft:function(step) {
        var o1Left = parseInt(this.o1.getStyle("left"));
        var o2Left = parseInt(this.o2.getStyle("left"))
        if (-o1Left>this.scrollW)
        {
            this.o1.setStyle({
                left:o2Left+this.scrollW+"px"
            });
        }
        if (-o2Left>this.scrollW)
        {
            this.o2.setStyle({
                left:o1Left+this.scrollW+"px"
            });
        }
        
        this.o1.setStyle({
            left: parseInt(this.o1.getStyle("left"))-step+"px"
        });
        this.o2.setStyle({
            left: parseInt(this.o2.getStyle("left"))-step+"px"
        });
    },

    moveRight:function(step) {
        var o1Left = parseInt(this.o1.getStyle("left"));
        var o2Left = parseInt(this.o2.getStyle("left"))
        if (o1Left>this.scrollW)
        {
            this.o1.setStyle({
                left:o2Left-this.scrollW+"px"
            });
        }
        if (o2Left>this.scrollW)
        {
            this.o2.setStyle({
                left:o1Left-this.scrollW+"px"
            });
        }
        
        this.o1.setStyle({
            left: parseInt(this.o1.getStyle("left"))+step+"px"
        });
        this.o2.setStyle({
            left: parseInt(this.o2.getStyle("left"))+step+"px"
        });
    },

    imgOver:function(e) {
        var o = e.element();
        if (o.tagName == "IMG")
        {
            o.setStyle({ border:"1px solid #FFF" });
            new Effect.Opacity(o, { from: 0, to: 1, duration: 0.3 });
        }
    },

    imgOut:function(e) {
        var o = e.element();
        if (o.tagName == "IMG")
        {
            o.setStyle({ border:"1px solid #666" });

        }
    }
};