大家帮我分析一下这段代码写的怎么样？

1.这是面向对象写法吗？
2.这个切换到最后一个，“right”的按钮就不让它再切了。该怎么样来判断啊？
“left”按钮的就最简单了
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
html,body{height:2000px}
a{position:fixed;top:0;left:0;}
ul{list-style:none;position:absolute;top:0;left:0;}
.list{width:505px;height:100px;overflow:hidden;position:relative}
li{width:100px;height:100px;background:orange;margin-right:1px;float:left}
    </style>
</head><body>
<div class="left" id="left">
left
</div>
<div class="right" id="right">
right
</div>
<div class="list" id="list">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
    
    <script type="text/javascript">
var $ = function (id){return document.getElementById(id)};
function Class(id){
this.id = $(id);
this.i = 0;
this.w = this.id.offsetWidth;
this.len = this.id.getElementsByTagName("li").length;
this.width = (this.id.getElementsByTagName("li")[0].offsetWidth+1)*this.len;
this.show = function(){
this.id.getElementsByTagName("ul")[0].style.width = this.width + "px";
}
}
Class.prototype = {
left:function(id){
var that = this;
$(id).onclick = function(){
that.move(id)
}
},
move : function(dir){
var ul = this.id.getElementsByTagName("ul")[0];
var left = ul.offsetLeft;
var timer = null;
var that = this;

switch(dir){
case 'left' :
this.i++;
function aa(){
if(left >= -500*that.i){
var dict = parseInt((-500*that.i  - left) /10);
if(dict > -1){
dict =-1;
}
left +=dict;
ul.style.left = left +"px";

timer = setTimeout(function(){aa()},30)
}else{
clearTimeout(timer);
}
}
aa();

break;
case 'right':
if(this.i == 0){
return false;
}
this.i--;
function aa_r(){
if(left <= -500*that.i){
var dict= parseInt((-500*that.i  - left) /10);
if(dict < 1 ){
dict = 1;
}
left += dict;
ul.style.left = left +"px";
timer = setTimeout(function(){aa_r()},30)
}else{
clearTimeout(timer);
}
}
aa_r();
break;
}
},
right:function(id){
var that = this;
$(id).onclick = function(){
that.move(id)
}
},
}
var obj = new Class("list");
obj.show();
obj.left("left");
obj.right("right")

</script>
    
</body>
</html>

解决方案 »

  1.   

    你这样是为了面向对象而面向对象。。页面上的每个元素，在js看来本身就是对象了，你还非要搞个Class？
      

  2.   

    这是面向对象的应用，Class作为一个js类使用；
    function Class作为类的构造函数
    Class.prototype为Class类的扩展成员
      

  3.   

    你可以通过控制滚动条来实现左右滚动啊 so easy!, 每次点击只是给滚动属性scrollleft 和scrollwidth判断一下就ok了
      

  4.   


    饿 js是弱类型语言，没有真正的继承机制，通过prototype可以达到继承效果
    不过这儿和这个没关系，你不用Class.prototype,在构造函数内用this定义这些成员是一样的效果