图片滚动，如何避免冲突的问题？？

实现当鼠标放在某个链接上时，图片自动滚动到对应的的图片上。 
function moveElement(id,final_x,final_y,interval) 
{ 
if(!document.getElementById) return false; 
if(!document.getElementsByTagName) return false; 
if(!document.getElementById(id)) return false; 
var element=document.getElementById(id); 
①if(element.movement) 
clearTimeout(element.movement); 
② if(!element.style.left) 
element.style.left="0px"; 
if(!element.style.top) 
element.style.top="0px"; 
var xpos=parseInt(element.style.left); 
var ypos=parseInt(element.style.top); 
if(xpos<final_x) 
{ 
var dx=Math.ceil((final_x-xpos)/10); 
xpos+=dx; 
} 
..... 
..... 
..... 
element.style.left=xpos+"px"; 
element.style.top=ypos+"px"; 
element.movement=setTimeout("moveElement('"+id+"',"+final_x+","+final_y+","+interval+")",interval); 
中间代码省略。标记为①的部分是为了避免图片滚动的冲动，当有新的滚动目标时清除先前的滚动目标。我一直想不通的是（貌似钻牛角尖了- -！）：首先如果只有这一个移动，运行到此时，他自己就会清除自己设定的element.movement属性。但是当鼠标放在另一链接上再次触发moveElement(..)函数时，万一上一移动过程运行在第二部分（标记为②），那两者不是各自在清除自己设定的element.movement属性吗，①如何起到避免冲突的作用呢。？？？？

解决方案 »

  1.   

    哦 不好意思。我移动的不是图片，而是显示图片的div（包含3张图片），改变它的scrollLeft.期待您的解答。代码如下：
    HTML:<body>
    <h1>Web Design</h1>
    <p>These are things you should know.</p>
    <div id="slideshow">
    <ul id="imagegallery">
    <li><img alt="" src="../images/drummer.gif"/></li>
    <li><img alt="" src="../images/basshead.gif"/></li>
    <li><img alt="" src="../images/bassist.gif"/></li>
    </ul></div>
    <ul id="linklist">
    <li><a href ="#" onclick="return false">first</a></li>
    <li><a href ="#" onclick="return false">seconde</a></li>
    <li><a href ="#" onclick="return false">third</a></li>
    </ul>
    </body>
    function showImg(i)    //   3>i>=0;
    {
    var finalPos=i*250;
    moveItSlow("slideshow",finalPos);
    }function moveItSlow(id,finalPos)
    {
        var div=document.getElementById(id);    
    if(finalPos!=div.scrollLeft)
        {
    if(div.element)
    clearTimeout(div.element);         
    var dx=finalPos-div.scrollLeft;
             var dx=(dx>0?1:-1)*(Math.ceil(Math.abs(dx/10)));
             div.scrollLeft+=dx;
             var func="moveItSlow('"+id+"',"+finalPos+")";
             scrolling=setTimeout(func,30);
        }}
    var scrolling;
    var index=0;
    var myTime=setInterval(function(){
    index++;
    if(index>=3)  index=0; showImg(index);},2000);function prepareShowImg()
    {
        var div=document.getElementById("slideshow");
        div.onmouseover=function()
    {   
         clearInterval(myTime);
    }
        div.onmouseout=function()
    {   
       
    myTime=setInterval(function(){showImg(index);index++;
    if(index==3)  index=0;},2000);
    }var linklist=document.getElementById("linklist");
    var as=linklist.getElementsByTagName("a");
    for(var i=0;i<as.length;i++)
    {
    as[i].index=i;   
    as[i].onmouseover=function(){
    if(myTime)
    clearInterval(myTime);
    if(scrolling)
    clearTimeout(scrolling);
    showImg(parseInt(this.index))
    }
       as[i].onmouseout=function(){
    myTime=setInterval(function(){showImg(index);index++;
    if(index==3)  index=0;},2000);
    }
    }
    }
    function addLoadEvent(func)
    {
    oldload=window.onload; 
    if(!oldload){
        window.onload=func;}
    else
    {
    window.onload=function()
    {
    oldload();
    func();
    }
    }
    }
    addLoadEvent(prepareShowImg);
      

  2.   


    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>循环滑动图片导航</title>
    </head><body>
    <script language="javascript">
    <!--
    var moveLen
    function showImg(i){
    var finalPos=i*moveLen+100;
    moveItSlow("slideshow",finalPos);
    }function moveItSlow(id,finalPos){
        var div=document.getElementById(id);
        if(finalPos!=div.offsetLeft){
    var dl=div.offsetLeft
    var dx=finalPos-dl;
            var dx=(dx>0?1:-1)*(Math.ceil(Math.abs(dx/10)));
            div.style.left=dl+dx;
            var func="moveItSlow('"+id+"',"+finalPos+")";
            scrolling=setTimeout(func,30);
        }
    }
    var scrolling,timer,timerOut;
    var index=-1;sw=0function nextSlideshow(){
    clearTimer()
    index++;
    if(index==3) index=0;
    showImg(index);
    timer=setTimeout(nextSlideshow,3000)
    }function clearTimer(){
    clearTimeout(timer);
    clearTimeout(timerOut);
    clearTimeout(scrolling);
    }function initShowImg(){
        var div=document.getElementById("slideshow");
        div.onmouseover=function(){clearTimer();}
        div.onmouseout=function(){timerOut=setTimeout(nextSlideshow,3000)}
    var linklist=document.getElementById("linklist");
    moveLen=linklist.getElementsByTagName("li")[0].offsetWidth;
    div.style.top=linklist.offsetTop+linklist.offsetHeight;
    var as=linklist.getElementsByTagName("a");
    for(var i=0;i<as.length;i++){
    as[i].index=i;   
    as[i].onmouseover=function(){
    clearTimer();
    index=this.index
    showImg(index)
    }
    as[i].onmouseout=function(){
    timerOut=setTimeout(nextSlideshow,3000)
    }
    }
    nextSlideshow()
    }
    function addLoadEvent(func){
    oldload=window.onload; 
    if(!oldload){
        window.onload=func;
    }else{
    window.onload=function(){
    oldload();
    func();
    }
    }
    }
    addLoadEvent(initShowImg);//-->
    </script>
    <style>
    ul {LIST-STYLE-TYPE: none}
    #linklist li{float:left;width:250px}
    #linklist li a{display:block;border:1px #fff solid;color:#900;background:#efefef; text-align:center}
    #linklist li a:hover{border:1px #efefef solid;background:#900;color:#fff}
    </style>
    <div id="slideshow" style="position:absolute;">
    <ul id="imagegallery">
    <li><img alt="" src="../images/drummer.gif"/></li>
    <li><img alt="" src="../images/basshead.gif"/></li>
    <li><img alt="" src="../images/bassist.gif"/></li>
    </ul>
    </div>
    <ul id="linklist">
    <li><a href ="#" onclick="return false">first</a></li>
    <li><a href ="#" onclick="return false">seconde</a></li>
    <li><a href ="#" onclick="return false">third</a></li>
    </ul></body></html>