JSON對象多個實例（幻燈片效果）

Question

我試圖做一個幻燈片插件使用純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; 
}  
}; 

HTML文件：

<!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! 

Answer 1

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