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