高手帮我看看怎么让这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>
<!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>