60分，js滚条拖动后，单击左右按钮出现错误。

大家好，我在做一个滚动条，支持拖动，并且按左按钮滚条往左移动，按右按钮滚条往右移动。滚条的状态是用全局变量active控制的。单独的按按钮或拖动时，都运行正常。按完按钮后，拖动功能也正常。问题是：当拖动后，再按左右按钮，滚条本来应该从位置1到位置2的，结果变成了直接跳到位置3。或者是反复在位置1,2或2，3之间移动。 也就是active=1的时候按next后active就变成了3 这个问题困扰我很久，都没有解决。希望能得到大家的帮助，万分感谢！！代码如下。
<body onload="load()"> 
  <div id="leftarrow" >
<img src="images/scrollleft.png" alt="leftarrow" />
  </div>
  
  <div id="scrollermid" onmouseover='movescroller(this)'>
  </div>
  
  <div id="scrollmiddle">
<img src="images/scrollmiddle.png" alt="middle section" />
  </div>

  <div id="rightarrow" >
         <img src="images/scrollright.png" alt="rightarrow" />
  </div></body> 
var active=1; //控制目前滚条在哪个位置
function load()  //initialize the scroller 
{
return true;
}document.getElementById("leftarrow").setAttribute("onclick","previous();"); //单击leftarrow图像，调用previous()函数让滚条往左移动。
document.getElementById("rightarrow").setAttribute("onclick","next();"); //单击rightarrow图像，调用next()函数让滚条往右移动。
function previous()
{
   if (active == 2)  //当滚条位置状态在中间
   {
      active= 1;   //让它的位置状态改为最左
      document.getElementById("scrollermid").style.left=40+"px"; //指定滚条的位置到最左。
      return true;
    }else if (active == 3)  //当滚条的位置在最右
    {
      active = 2;   //让它的位置状态改为中间
      document.getElementById("scrollermid").style.left=352+"px"; //指定滚条的位置到中间。
      return true;
     }
}function next()
{
    if (active == 2)
    {
active = 3;
document.getElementById("scrollermid").style.left=664+"px";
return true;
     }else if (active == 1)
     {
active = 2;
document.getElementById("scrollermid").style.left=352+"px";
return true;
     }
}var checknowleft=function(z){   

   if(z<325){ //鼠标离开时的位置没超过中间位置时，返回滚条应该去的位置（最左）。
      active=1;
      return 40;
    };

    if(z>=610){ //鼠标离开时的位置超过最右位置时，返回滚条应该去的位置（最右）。
       active=3;
return 664;
    };

    if(325<=z<610){   //坐标在中间时，滚条在中间。
active=2;
return 352;
    };
} 
function movescroller(obj){
   var x,y,z,drag_=false;
   var oevent=new Function('e','if (!e) e = window.event;return e')
   obj.onmousedown=function(e){   //e  the mouse clickdown
   drag_=true;
   with(this){
        var temp0=style.left.replace("px","")*1;  //object position 
x=oevent(e).clientX;    //window.event.clientX  the x coordinate of mouse
y=oevent(e).clientY;
document.onmousemove=function(e){
if(!drag_)return false;
with(this){
z = temp0 + oevent(e).clientX-x;   //z is the mouse  position
if (z<40){z=40;drag_=false;} //mouse drug over the container (the left border)
if (z>610){z=664;}  //the right border
style.left=z+"px";  //style.left is the left postion of the obj.
}
}

         document.onmouseup=function(e){
drag_ = false;
var nowleft = checknowleft(z); // choose where to stay, according to the current position.
style.left=nowleft+"px";  //give the obj the px of the destination.
}
      }
   }
}

解决方案 »

  1.   

    你在运行的过程难道不觉得active其实一直在2这个位置上 而非你想想中的1上吗
      

  2.   

    明显active跟踪错误。你点击左右按钮的时候要根据滚动条当前的位置再判断active的值，再做处理。
    还有一些小问题
    document.getElementById("leftarrow").setAttribute("onclick","previous();"); 
    onclick一般不能setAttributes，会有bug的。一般都是obj.onclick =previous;还有，一般onclick都不会定义在div上面把，图像上还算常见。
      

  3.   

    谢谢楼上两位的指导
    TO cj205：我在调试的时候其实active的值一直跟当前滚动条的位置保持一致。只是拖动后，再点左右按钮active会从1直接跳到3去。  TO brainwkernighan：哦 谢谢你指出问题所在。 onclick那里我会修改的。现在不太清楚的是我怎么获得滚动条当前位置呀。
    是直接调用
    document.onmouseup=function(e){
      drag_ = false;
      var nowleft = checknowleft(z); // choose where to stay, according to the current position.
      style.left=nowleft+"px";  //give the obj the px of the destination.            
    }中，nowleft的值么？ 好像不行。而且如果我一直没拖动过滑动条的话 也没有这个值。 请指教。 谢谢。