高手帮我看看怎么让这2个对象互不相关?

<!DOCTYPE HTML>
<html>
 <head>
  <title> New Document </title>
<!--<script type="text/javascript" src="jquery-1.6.min.js">
</script>-->
<style type="text/css">
ul{list-style:none}
*{margin:0;padding:0;}
.list{width:600px;height:120px;position:relative;overflow:auto;margin:0 auto}
.list li{float:left;width:120px;height:120px; background:orange;margin-right:10px}
.list ul{position:absolute;top:0;left:0;}
</style>
 </head> <body>
<div id="list" class="list"><ul id="abc">
      <li></li>
      <li>das</li>
      <li>dadf</li>
      <li>dsaf4</li>
      <li>sdafu</li>
      <li>aa</li>
  <li></li>
      <li>das8</li>
      <li>dadf</li>
      <li>dsaf</li>
      <li>sdafu</li>
      <li>aa</li>
  <li>aa23</li>
   </ul>
  </div>
   <span id="next">next</span>
  <span id="previous">previous</span>
  <div id="list1" class="list"><ul id="abc1">
      <li></li>
      <li>das</li>
      <li>dadf</li>
      <li>dsaf4</li>
      <li>sdafu</li>
      <li>aa</li>
  <li></li>
      <li>das8</li>
      <li>dadf</li>
      <li>dsaf</li>
      <li>sdafu</li>
      <li>aa</li>
  <li>aa23</li>
   </ul>
  </div>
  <span id="next1">next</span>
  <span id="previous1">previous</span>
<script  type="text/javascript">
<!--
var arr = new Array();
var w =0;
var y=120;
var p=0;
var timer;
var to = 0;
var $ = function(id){return document.getElementById(id)};
var list = $("list");
var ul = list.firstChild;
window.onload = function(){
var li = ul.childNodes;
for(var i=0; i<li.length-1; i++){
if(li[i].nodeType == 3){
ul.removeChild(li[i])
}
arr.push(li[i]);
w = w+arr[i].offsetWidth;
}
con(ul)
}
function con(o){
var width=0;var height =0;
for(var i=0; i<arr.length;i++){
width = width+arr[i].offsetWidth+10;
if(arr[i].offsetHeight > height){
height = arr[i].offsetHeight;
}
}
o.style.width = width+"px";
o.style.height = height+ "px";
}
function autoScroll(dirNext,dirPrev,list){
this.dirNext = dirNext;
this.dirPrev = dirPrev;
this.list = list;
}
autoScroll.prototype={
next:function(){
$(this.dirNext).onclick= function(){
obj.runScroll(false)
}
},
prev:function(){
$(this.dirPrev).onclick= function(){
obj.runScroll(true)
}
},
runScroll:function(t){
var list = $(this.list);
switch(t){
case true:
if(p >= list.childNodes.length-6){
return false;
}
var g = -130*(p+1);
if(list.offsetLeft > g){
to = to + (g - list.offsetLeft) / 5;
list.style.left =   parseInt(to) + "px";
timer = setTimeout(function(){
obj.runScroll(t)
},20)
}
else{
p++;
clearTimeout(timer);
}
break;
case false:
if(p <= 0){
return false;
}
var g = -130*(p-1);
if(list.offsetLeft < g){
to = to + (g - list.offsetLeft) / 5;
list.style.left =   parseInt(to) + "px";
timer = setTimeout(function(){
obj.runScroll(t)
},20)
}
else{
p--;
clearTimeout(timer);
}
break;
}
}
}
var obj = new autoScroll("next","previous","abc")
obj.next();
obj.prev();
var obj = new autoScroll("next1","previous1","abc1");
obj.next();
obj.prev();//-->
</script>
 </body>
</html>

解决方案 »

  1.   

     next:function(){
                    $(this.dirNext).onclick= function(){
                        obj.runScroll(false)
                    }
                }
    obj哪里来的？楼主意思是指本身？是的话，改成 next:function(){
          var self = this;
                    $(this.dirNext).onclick= function(){
                        self.runScroll(false)
                    }
                }
    其他代码都要改成这样
      

  2.   


    autoScroll.prototype={
                next:function(){
                 var self = this;
                    $(this.dirNext).onclick= function(){
                        self.runScroll(false)
                    }
                },
                prev:function(){
                 var self = this;
                    $(this.dirPrev).onclick= function(){
                        self.runScroll(true)
                    }
                },
                runScroll:function(t){
                    var list = $(this.list);
                    var self = this;
                    switch(t){
                        case true:
                            if(p >= list.childNodes.length-6){
                                return false;
                            }
                            var g = -130*(p+1);
                            if(list.offsetLeft > g){
                                to = to + (g - list.offsetLeft) / 5;
                                list.style.left =   parseInt(to) + "px";
                                timer = setTimeout(function(){
                                    self.runScroll(t)
                                },20)
                            }
                            else{
                                p++;
                                clearTimeout(timer);
                            }
                    break;
                    case false:
                            if(p <= 0){
                                return false;
                            }
                            var g = -130*(p-1);
                            if(list.offsetLeft < g){
                                to = to + (g - list.offsetLeft) / 5;
                                list.style.left =   parseInt(to) + "px";
                                timer = setTimeout(function(){
                                    self.runScroll(t)
                                },20)
                            }
                            else{
                                p--;
                                clearTimeout(timer);
                            }
                    break;
                }
            }
      

  3.   


    <!DOCTYPE HTML>
    <html>
     <head>
      <title> New Document </title>
        <!--<script type="text/javascript" src="jquery-1.6.min.js">
        </script>-->
        <style type="text/css">
            ul{list-style:none}
            *{margin:0;padding:0;}
            .list{width:600px;height:120px;position:relative;overflow:auto;margin:0 auto}
            .list li{float:left;width:120px;height:120px; background:orange;margin-right:10px}
            .list ul{position:absolute;top:0;left:0;}
        </style>
     </head> <body>
    <div id="list" class="list"><ul id="abc">
          <li></li>
          <li>das</li>
          <li>dadf</li>
          <li>dsaf4</li>
          <li>sdafu</li>
          <li>aa</li>
          <li></li>
          <li>das8</li>
          <li>dadf</li>
          <li>dsaf</li>
          <li>sdafu</li>
          <li>aa</li>
          <li>aa23</li>
       </ul>
      </div>
       <span id="next">next</span>
      <span id="previous">previous</span>
      <div id="list1" class="list"><ul id="abc1">
          <li></li>
          <li>das</li>
          <li>dadf</li>
          <li>dsaf4</li>
          <li>sdafu</li>
          <li>aa</li>
          <li></li>
          <li>das8</li>
          <li>dadf</li>
          <li>dsaf</li>
          <li>sdafu</li>
          <li>aa</li>
          <li>aa23</li>
       </ul>
      </div>
      <span id="next1">next</span>
      <span id="previous1">previous</span>
    <script  type="text/javascript">
    <!--
            var $ = function(id){return document.getElementById(id)};
            window.onload = function(){
            var obj = new autoScroll("next","previous","list")
            obj.next();
            obj.prev();
            var obj1 = new autoScroll("next1","previous1","list1");
            obj1.next();
            obj1.prev();
            }
            function autoScroll(dirNext,dirPrev,list){
            this.arr = new Array();
            this.w =0;
            this.y=120;
            this.p=0;
            this.timer;
            this.to = 0;
                this.dirNext = $(dirNext);
                this.dirPrev = $(dirPrev);
                this.list = $(list);
                var ul = this.list.firstChild;
                var li = ul.childNodes;
                for(var i=0; i<li.length-1; i++){
                    if(li[i].nodeType == 3){
                        ul.removeChild(li[i])
                    }
                    this.arr.push(li[i]);
                    this.w = this.w+this.arr[i].offsetWidth;
                }
                var width=0;var height =0;
                for(var i=0; i<this.arr.length;i++){
                    width = width+this.arr[i].offsetWidth+10;
                    if(this.arr[i].offsetHeight > height){
                        height = this.arr[i].offsetHeight;
                    }
                }
                ul.style.width = width+"px";
                ul.style.height = height+ "px";
            }
            autoScroll.prototype={
                next:function(){
                    this.dirNext.onclick= (function(obj){
                        return function(){
                         obj.runScroll(false)
                        }
                    })(this);
                },
                prev:function(){
                    this.dirPrev.onclick= (function(obj){
                        return function(){
                         obj.runScroll(true)
                        }
                    })(this);
                },
                runScroll:function(t){
                    var list = this.list.firstChild;
                    switch(t){
                        case true:
                            if(this.p >= list.childNodes.length-6){
                                return false;
                            }
                            var g = -130*(this.p+1);
                            if(list.offsetLeft > g){
                                this.to = this.to + (g - list.offsetLeft) / 5;
                                list.style.left =   parseInt(this.to) + "px";
                                this.timer = setTimeout((function(obj){
                                 return function(){
                                     obj.runScroll(t)
                                    }
                                })(this),20)
                            }
                            else{
                                this.p++;
                                clearTimeout(this.timer);
                            }
                    break;
                    case false:
                            if(this.p <= 0){
                                return false;
                            }
                            var g = -130*(this.p-1);
                            if(list.offsetLeft < g){
                                this.to = this.to + (g - list.offsetLeft) / 5;
                                list.style.left =   parseInt(this.to) + "px";
                                timer = setTimeout((function(obj){
                                    return function(){
                                     obj.runScroll(t)
                                    }
                                })(this),20)
                            }
                            else{
                                this.p--;
                                clearTimeout(this.timer);
                            }
                    break;
                }
            }
        }
    //-->
    </script>
     </body>
    </html>
      

  4.   

    再问一个问题:
    function autoScroll(dirNext,dirPrev,list){    autoScroll.prototype={
             next:function(){
                alert(this)       //为什么这里的this不是next:function函数,反而指向autoScroll函数.求解,
                                  //有多详细就讲多详细吧
             }
        }}
      

  5.   


    普通对象var obj = {name:"123", say:function(){alert(this.name)}};拆出来看，指向就是obj
      

  6.   

    var obj = {
    name:"sds",
    show:function(){
    console.log(this == obj)
    return function(){
    console.log(this)
    }()
    }
    }
    obj.show()
    这里的return function()匿名函数是不是跟obj对象无任何关系的?
    而show是obj的方法.所有show里面是属于obj的作用域,
    而return function匿名函数里面是属于window的作用域.
    是这样理解吗???