一个面向对象的js问题大家帮忙看看

想自己实现一个js图片的滚动效果主要是根据dom_drag 这个插件依葫芦画瓢模仿下

/**
* @author jiashu
*/

var slide = {
  obj:null,
  obj_child1:null,
  obj_child2:null,
  time_id : null,
  //div_id 住容器的ID scro_direction 图片滚动方向 speed 滚动速度
    init:function(div_id,scro_direction,speed,width,height){
        if(document.getElementById(div_id)==null){return false;}

        var container = document.getElementById(div_id);//

        var inner_html = container.innerHTML;
        container.innerHTML = "";

        var container_c1 = this.create_container("div",div_id+"1",inner_html);
        this.obj_child1 = container_c1;//对第一个字容器进行处理

        var container_c2 = this.create_container("div",div_id+"2",inner_html);
        this.obj_child2 = container_c2;//对第二个子容器处理

        container.appendChild(container_c1);
        container.appendChild(container_c2);
        container.style.overflow = "hidden";
        container.style.width = width;
        container.style.height = height;

        container.scro_direction = scro_direction;
        container.speed = speed;

        this.start.call(container);
        container.onmouseout = slide.start;
        container.onmouseover = slide.stop;
    },
    stop : function(){
        clearInterval(slide.time_id);
    },
    start:function(){
           var con = slide.obj = this;
           slide.time_id = setInterval(slide.top_do,con.speed);
    },
    top_do:function(){
        if(slide.obj_child2.offsetTop- slide.obj.scrollTop <=0){
            slide.obj.scrollTop -= slide.obj_child1.offsetHeight;
        }
        else {slide.obj.scrollTop ++;}
    },
    create_container:function(type,id,innerHTML){
        var new_container = document.createElement(type);
        new_container.id = id;
        new_container.innerHTML = innerHTML;
        return new_container;
    }

}

HTML代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>img_slide</title>
        <script type="text/javascript" src="javascripts/slide.js"></script>
        <script type="text/javascript">
            window.onload = function(){
                slide.init('con','top',30,'200px','200px');
                //slide.init('coe','top',30,'200px','200px');
            }
        </script>
    </head>
    <body>
        <h1>New Web Project Page</h1>
        <div id="con">
            <p><img src="images/enemy.png"></p>
            <p><img src="images/player.png"></p>
            <p><img src="images/enemy.png"></p>
            <p><img src="images/player.png"></p>
            <p><img src="images/enemy.png"></p>
            <p><img src="images/player.png"></p>
            <p><img src="images/enemy.png"></p>
            <p><img src="images/player.png"></p>
            <p><img src="images/enemy.png"></p>
        </div>

        <div id="coe">
            <p><img src="images/enemy.png"></p>
            <p><img src="images/player.png"></p>
            <p><img src="images/enemy.png"></p>
            <p><img src="images/player.png"></p>
            <p><img src="images/enemy.png"></p>
            <p><img src="images/player.png"></p>
            <p><img src="images/enemy.png"></p>
            <p><img src="images/player.png"></p>
            <p><img src="images/enemy.png"></p>
        </div>
    </body>

</html>

现在一个问题出现了：

window.onload = function(){
                slide.init('con','top',30,'200px','200px');
                //slide.init('coe','top',30,'200px','200px');
            }

是可以的但是当初始化2个的时候就出现问题了。。。请问大虾。。这怎么改叻。。。

一个面向对象的js问题 大家帮忙看看

一个面向对象的js问题大家帮忙看看