Javascript JSON对象多实例（幻灯片效果）

我正在尝试使用纯javascript制作幻灯片插件，在我完成代码后，如果我在一个html页面中只使用一个幻灯片功能，一切都会正常进行，但如果我想要多个，页面将崩溃，我的插件将崩溃：

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<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;
}    
};

var akulubala={
“初始”：{“速度”：1000，
“方向”：“底部”，//方向
“模式”：“fitful”，//滚动模式持续或间歇
“id”：“akulubala_卷轴”，
“自动播放”：正确，
“风格”：{}
},
“偏移量”：空，
“保证金x”：0，
“滚动容器”：空，
“滚动条”：空，
“滚动元素”：0，
“intval_定时器”：空，
“超时计时器”：空，
滚动：功能（obj）{
如果（对象类型！=“未定义”）{
for（obj中的var键）{
if（this.init_u2;.hasOwnProperty（key））{
this.init_[key]=obj[key]；
}
}
}
console.log（this）；
this.scroll\u container=document.getElementById（this.init\u.id）；
this.scroller=document.getElementById（this.init.id+“\u子项”）；
this.styleset（this.init_.style）；
这个。run（）；
},
样式集：函数（样式）{
var default_style={“margin”：“0px”，“padding”：“0px”}；
for（默认_样式下的变量键）{
this.scroll_container.style[key]=默认_样式[key]；
this.scroller.style[key]=默认的_样式[key]；
}
函数isEmpty（obj）{
for（obj中的变量名称）{
返回false；
}
返回true；
}
//溢出
if（style.overflow==true）{
this.scroll\u container.style.overflow=“可见”；
}否则{
this.scroll\u container.style.overflow=“hidden”；
}
this.scroller_elements=this.scroller.children.length；
如果（this.init_uu2;.direction==“top”| this.init_u2;.direction==“bottom”）{
如果（！isEmpty（样式））{
this.scroll\u container.style.height=style.height；
this.scroll\u container.style.width=style.width；
this.scroller.style.height=this.scroller\u元素*
parseInt（this.scroll_container.style.height.replace（“px”和“））+“px”；
this.scroller.style.width=style.width；
}否则{
this.scroll_container.style.height=“20px”；
this.scroll\u container.style.width=“200px”；
this.scroller.style.height=this.scroller_元素*20+“px”；
this.scroller.style.width=“200px”；
}
if（this.init_u2;.direction==“bottom”）{
this.scroller.style.position=“relative”；
this.scroller.style.top=
（0-（此滚动条元素-1）*
parseInt（this.scroll\u container.style）。
高度。替换（“px”，“px”）+“px”；
}否则{
//this.scroller.style.cssFloat=“left”；
}            
this.offset=parseInt（this.scroll\u container.style.height.replace（“px”，即“”）；
}否则{
如果（！isEmpty（样式））{
this.scroll\u container.style.height=style.height；
this.scroll\u container.style.width=style.width；
this.scroller.style.height=style.height；
this.scroller.style.width=this.scroller\u元素*
parseInt（this.scroll\u container.style.width.replace（“px”和“））+“px”；
}否则{
this.scroll_container.style.height=“20px”；
this.scroll\u container.style.width=“200px”；
this.scroller.style.height=“20px”；
this.scroller.style.width=this.scroller_元素*200+“px”；
}
if（this.init_u2;.direction==“right”）{
this.scroller.style.position=“relative”；
this.scroller.style.left=
（0-（this.scroller\u elements-1）*parseInt（this.scroll\u容器）。
style.width.replace（“px”和“））+“px”；
}否则{
this.scroller.style.cssFloat=“left”；
}
this.offset=parseInt（this.scroll\u container.style.width.replace（“px”，即“”）；
}  
},
运行：函数（）{
如果（此.init\u.auto\u播放）{
这个.intvalTimerStart（）；
}否则{
this.waitTrigger（）；
}
这个。holdEffect（）；
},
开始：函数（）{
这个。移动（）；
},
waitTrigger:function（）{
},
move:function（）{
这个.intvalTimerStop（）；
clearTimeout（定时器超时定时器）；
var速度=此。初始速度，偏移量=此。偏移量，obj=此；
var timer\u out\u timer=setTimeout（函数（）{
obj.move（）；
}，此初始速度/此偏移量）；
如果（此.margin_x
问题已解决：
var akulubala=函数（）{
返回{
“初始”：{“速度”：1000，
“方向”：“底部”，//方向
“模式”：“fitful”，//滚动模式持续或间歇
“id”：“akulubala_卷轴”，
“自动播放”：正确，
“风格”：{}
},
“偏移量”：空，
“保证金x”：0，
“滚动容器”：空，
“滚动条”：空，
“滚动元素”：0，
“intval_定时器”：空，
“超时计时器”：空，
滚动：功能（obj）{
如果（对象类型！=“未定义”）{
for（obj中的var键）{
if（this.init_u2;.hasOwnProperty（key））{
this.init_[key]=obj[key]；
}
}
}
console.log（this）；
this.scroll\u container=document.getElementById（this.init\u.id）；
this.scroller=document.getElementById（this.init.id+“\u子项”）；
this.styleset（this.init_.style）；
这个。run（）；
},
样式集：函数（样式）{
var default_style={“margin”：“0px”，“padding”：“0px”}；
for（默认_样式下的变量键）{
this.scroll_container.style[key]=默认_样式[key]；
this.scroller.style[key]=默认的_样式[key]；
}
函数isEmpty（obj）{
for（obj中的变量名称）{
返回false；
}
返回true；
}
//溢出
if（style.overflow==true）{
this.scroll\u container.style.overflow=“可见”；
}否则{
this.scroll\u container.style.overflow=“hidden”；
}
this.scroller_elements=this.scroller.children.length；
如果（this.init_uu2;.direction==“top”| this.init_u2;.direction==“bottom”）{
如果（！isEmpty（样式））{
this.scroll\u container.style.height=style.height；
此.scroll\u container.st
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="./m_scroll.js" type="text/javascript" ></script>
    <style>
        #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;
        }
    </style>
</head>
<body style="padding:10px">
    <div id="akulubala_scroll" style="border:1px solid black">
    <ul id="akulubala_scroll_child"> 
      <li><img src="1.jpg" /></li>
      <li><img src="2.jpg" /></li>
      <li><img src="3.jpg" /></li>
      <li><img src="4.jpg" /></li>
      <li><img src="5.jpg" /></li>
      <li><img src="6.jpg" /></li>              
    </ul>
    </div>
    <div id="example">
        <ul id="example_child">
            <li><a name="ime_hw" href="#">a</a></li>
            <li><a name="ime_py" href="#">b</a></li>
            <li class="ln">c</li>
            <li><a name="ime_cl" href="#">d</a></li>
        </ul>
    </div>        
    <script>
    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"
    // });  
    </script>
</body>
</html>

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!

question solved:
var akulubala = function(){
return {
"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.scroll_container.style.cssFloat = "right";
//                this.scroll_container.style.position = "absolute";
            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<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;
}    
};
}