js可左右切换的无缝滚动

自己写了个无缝滚动 现在的情况是 我点击了向左滚动或者是向右滚动 但是在鼠标onmouseout事件之后 不能继续以前的滚动状态  而是一律向左滚动了 
纠结~~~
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
</head>
<style>
.div1{
border:#F00 solid 1px;
width:750px;
height:86px;
padding:2px;
overflow:hidden;
overflow:scroll;}
.div2{
float:left;
width:800%;
height:80px;}
.div3,.div4{
float:left;
border:#F00 solid 1px;
width:750px;
height:80px;
padding:2px;
}
.pic{
border:#00F solid 1px;
width:100px;
height:78px;
float:left;
background:#0F0;
margin-left:5px;
}
</style>
<body>
<div class="div1" id="div1"><div class="div2" id="div2"><div class="div3" id="div3" >
<div class="pic" style="background:#00F"></div>
<% for i=1 to 6%>
<div class="pic" id="pic"><%=i%></div>
<%
next
%>
</div>
<div class="div4" id="div4"></div>
</div>
</div>
<center>
<input type="button" value="LEFT" onclick="stopscroll_l()" />
<input type="button" value="RIGHT" onclick="stopscroll_r()" />
</center>
<label>DIV1.scrollLeft:<input type="text" id="svalue" style="margin-top:50px;" /></label><br />
<label>DIV2.offsetWidth:<input type="text" id="ovalue" style="margin-top:50px;" /></label><br />
<label>style值:<input type="text" id="stylevalue" style="margin-top:50px;" /></label>
<script type="text/javascript">
var div1;
div1=document.getElementById("div1");
div3=document.getElementById("div3");
div4=document.getElementById("div4");
pic=document.getElementById("pic");
div4.innerHTML=div3.innerHTML;
var timeout;
function marq_l(){
if(div3.offsetWidth-div1.scrollLeft<=0)
{div1.scrollLeft-=div3.offsetWidth;}
else{
div1.scrollLeft++;
}
/*setInterval(marq_l,5);*/
}
function marq_r(){
if(div1.scrollLeft<=0)
    div1.scrollLeft+=div3.offsetWidth
    else{
    div1.scrollLeft--;
}
}
var svalue=document.getElementById("svalue");
var ovalue=document.getElementById("ovalue");
var stylevalue=document.getElementById("stylevalue");
timeout=setInterval(marq_r,5); //初始状态
var style="l";
function getvalue() {
svalue.value=div1.scrollLeft;
ovalue.value=div3.offsetWidth;
}
function stopscroll_l(){//左移动
window.clearInterval(timeout)
timeout=setInterval(marq_l,5);
style="l";
}
function stopscroll_r(){//右移动
window.clearInterval(timeout)
timeout=setInterval(marq_r,5);
style="r";
}
setInterval(getvalue,1);
div1.onmousemove=function(){clearInterval(timeout)};
div1.onmouseout=function(){
if (style="l"){
timeout=setInterval(marq_l,5);
/*stylevalue.value=style;*/}
    else 
if(style="r"){
timeout=setInterval(marq_r,5);
/*stylevalue.value=style;*/
}
};
/*pic.onmouseout=*/
function getStyleValue(){
stylevalue.value=style;
}
setInterval(getStyleValue,1);
</script>
</body>
</html>

解决方案 »

  1.   

    http://www.popub.net/script/MSClass.html
      

  2.   

    div1.onmouseout=function(){
        if (style="l"){
        timeout=setInterval(marq_l,5);
        /*stylevalue.value=style;*/}
        else 
        if(style="r"){
            timeout=setInterval(marq_r,5);
        /*stylevalue.value=style;*/
            }
        };
    看一下你鼠标离开之后STYLE是什么值
      

  3.   

         style是l
      

  4.   

    已测试<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>图片左右滚动</title>
        <style type="text/css">
            #first{width:820px;height:160px;overflow:hidden;}
            #second{width:250%}
            #second img{float:left;margin-right:3px;width:160px;height:160px;}
            #third{float:left;}
            #four{float:left;}
        </style>
    </head>
    <body>
    <a id="left">向左</a>
    <div id="first">
        <div id="second">
            <div id="third">
                <img src="images/10.jpg" />
                <img src="images/11.jpg" />
                <img src="images/5.jpg" />
                <img src="images/6.jpg" />
                <img src="images/7.gif" />
                <img src="images/8.jpg" />
            </div>
            <div id="four"></div>
        </div>
    </div>
    <a id="right">向右</a>
    <script type="text/javascript">
        var first = document.getElementById("first");
        var third = document.getElementById("third");
        var four = document.getElementById("four");
        var timer=null;
        var direction="left";
        four.innerHTML = third.innerHTML;
        function leftScroll(){
            if(four.offsetLeft-first.scrollLeft<=0){
                first.scrollLeft-=four.offsetLeft;
            }
            else
                first.scrollLeft++;
        }
        function rightScroll(){
            if(first.scrollLeft<=0){
                first.scrollLeft=four.offsetLeft;
            }
            else{
                first.scrollLeft--;
            }
        }    
        timer = setInterval(leftScroll,1);
        document.getElementById("left").onclick=function(){
            direction="left";
            clearInterval(timer);
            timer = setInterval(leftScroll,1);
        }
        document.getElementById("right").onclick=function(){
            direction="right"
            clearInterval(timer);
            timer = setInterval(rightScroll,1);
        }
        first.onmouseover = function(){
            clearInterval(timer);
        }
        first.onmouseout = function(){
            if(direction=="left")
                timer = setInterval(leftScroll,1);
            else
                timer = setInterval(rightScroll,1);
        }
    </script>
    </body>
    </html>