JSON object multiple instance (slide effects)
<p>i'm trying to make a slide plugin use pure javascript,after i finished my code,everything goes fine if i only use one slide function in one html page,but if i want more than one ,page will crashed,my plugin is blow:</p>

<pre><code>var akulubala = {
"init_":{"speed":1000,
         "direction":"bottom",//direction 
         "mode":"fitful",//scroll mode durative or fitful
         "id":"akulubala_scroll",
         "auto_play":true,
         "style":{}
        },
"offset":null,
"margin_x":0,
"scroll_container":null,
"scroller":null,
"scroller_elements":0,
"intval_timer":null,
"time_out_timer":null,

 scroll : function(obj){
     if(typeof obj !=="undefined"){             
        for(var key in obj){
            if(this.init_.hasOwnProperty(key)){
                this.init_[key] = obj[key];
            }
        }
    }
    console.log(this);
    this.scroll_container = document.getElementById(this.init_.id);
    this.scroller = document.getElementById(this.init_.id+"_child");
    this.styleset(this.init_.style);
    this.run();
},
styleset:function(style){
  var default_style = {"margin":"0px","padding":"0px"};

  for(var key in default_style){
          this.scroll_container.style[key] = default_style[key];
          this.scroller.style[key] = default_style[key];    
  }

  function isEmpty(obj){
      for(var name in obj){
          return false;
      }
      return true;
  }
  //overflow
    if(style.overflow===true){
        this.scroll_container.style.overflow = "visible";
    }else{
        this.scroll_container.style.overflow = "hidden";
    }


  this.scroller_elements = this.scroller.children.length;

 if(this.init_.direction === "top" || this.init_.direction === "bottom"){         
        if(!isEmpty(style)){
            this.scroll_container.style.height = style.height;
            this.scroll_container.style.width = style.width;
            this.scroller.style.height =  this.scroller_elements*
parseInt(this.scroll_container.style.height.replace("px",""))+"px";
            this.scroller.style.width = style.width;

        }else{
            this.scroll_container.style.height = "20px";
            this.scroll_container.style.width = "200px";
            this.scroller.style.height = this.scroller_elements*20+"px";
            this.scroller.style.width = "200px";
        }

        if(this.init_.direction === "bottom"){
            this.scroller.style.position = "relative";                
            this.scroller.style.top = 
(0-(this.scroller_elements-1)*
parseInt(this.scroll_container.style.
height.replace("px","")))+"px";                
        }else{
            //this.scroller.style.cssFloat = "left";
        }            
        this.offset = parseInt(this.scroll_container.style.height.replace("px",""));
 }else{
        if(!isEmpty(style)){
            this.scroll_container.style.height = style.height;
            this.scroll_container.style.width = style.width;
            this.scroller.style.height = style.height;
            this.scroller.style.width = this.scroller_elements*
parseInt(this.scroll_container.style.width.replace("px",""))+"px";
        }else{
            this.scroll_container.style.height = "20px";
            this.scroll_container.style.width = "200px";
            this.scroller.style.height = "20px";
            this.scroller.style.width = this.scroller_elements*200+"px";
        }
        if(this.init_.direction === "right"){
            this.scroller.style.position = "relative";                
            this.scroller.style.left = 
(0-(this.scroller_elements-1)*parseInt(this.scroll_container.
style.width.replace("px","")))+"px";                
        }else{
            this.scroller.style.cssFloat = "left";
        }
         this.offset = parseInt(this.scroll_container.style.width.replace("px",""));
 }  
},
run :function(){

    if(this.init_.auto_play){
        this.intvalTimerStart();
    }else{
        this.waitTrigger();
    }
    this.holdEffect();
},
start:function(){
        this.move();
},
waitTrigger:function(){

},
move:function(){
    this.intvalTimerStop();
    clearTimeout(timer_out_timer);
    var speed = this.init_.speed,offset=this.offset,obj = this;
    var timer_out_timer = setTimeout(function(){
        obj.move();
    },this.init_.speed/this.offset);
    if(this.margin_x&lt;this.offset){
        this.margin_x +=1;
    }else{        
        this.margin_x = 0;
        clearTimeout(timer_out_timer);
        if(this.init_.direction !== "bottom"){
            this.scroller.appendChild(this.scroller.children[0]);
        }else{
            this.scroller.insertBefore
(this.scroller.children[this.scroller_elements-1],this.scroller.childNodes[0]);
        }         
        this.intvalTimerStart();
    }
    this.effectWork();
    this.scroll_container.onmouseover = function(){
        clearTimeout(timer_out_timer);
    };       
    this.scroll_container.onmouseout = function(){
            timer_out_timer = setTimeout(function(){
                obj.move();
            },speed/offset);
    };
},
effectWork:function(){
    switch(this.init_.direction){
        case "top":
            this.scroller.style.marginTop = (0-this.margin_x)+"px" ; 
            break;
        case "bottom":
            this.scroller.style.top = 
this.margin_x-parseInt((this.scroller_elements-    1)*parseInt(this.
scroll_container.style.height.replace("px","")))+"px" ;
            break;
        case "left":
            this.scroller.style.marginLeft = (0-this.margin_x)+"px" ;
            break;
        case "right":
            this.scroller.style.marginLeft = this.margin_x+"px" ;
            break;
    }       
},
holdEffect:function(){
    var obj = this;
    this.scroll_container.onmouseover = (function(obj){
        obj.intvalTimerStop();
    })(obj);
    this.scroll_container.onmouseout = (function(obj){
        obj.intvalTimerStart();
    })(obj);
},
intvalTimerStart:function(){
    var obj = this;
    if(this.init_.mode==="durative"){
        this.intval_timer = setInterval(function(){
            obj.start();
        }, 0);
    }else{
        this.intval_timer = setInterval(function(){
            obj.start();
        }, this.init_.speed);
    }              
},
intvalTimerStop:function(){
    clearInterval(this.intval_timer);
    return false;
}    
};
</code></pre>

<p>html file:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    &lt;script src="./m_scroll.js" type="text/javascript" &gt;&lt;/script&gt;
    &lt;style&gt;
        #akulubala_scroll{
            cursor: pointer;
        }
        #akulubala_scroll_child li{
            list-style: none;
            height: 160px;
            width: 280px;
            float: left;
        }
        #example{
            cursor: pointer
        }
        #example_child li{
            list-style: none;
            float: left;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body style="padding:10px"&gt;
    &lt;div id="akulubala_scroll" style="border:1px solid black"&gt;
    &lt;ul id="akulubala_scroll_child"&gt; 
      &lt;li&gt;&lt;img src="1.jpg" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="2.jpg" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="3.jpg" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="4.jpg" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="5.jpg" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="6.jpg" /&gt;&lt;/li&gt;              
    &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id="example"&gt;
        &lt;ul id="example_child"&gt;
            &lt;li&gt;&lt;a name="ime_hw" href="#"&gt;a&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a name="ime_py" href="#"&gt;b&lt;/a&gt;&lt;/li&gt;
            &lt;li class="ln"&gt;c&lt;/li&gt;
            &lt;li&gt;&lt;a name="ime_cl" href="#"&gt;d&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;        
    &lt;script&gt;
    akulubala.scroll({
        "id":"akulubala_scroll",
        "mode":"durative",
        "direction":"left",
        "speed":6000,
        "style":{
            "width":"280px",
            "height":"160px",
            "overflow":false
        }
    });
    //akulubala.scroll({
    //    "id":"example",
    //    "mode":"fitful",
    //    "direction":"left"
    // });  
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Again,if i only want frist ul scroll,nothing wrong with this,but if i want id#example also scroll,page will crash,thanks very much!
</code></pre>
