关于滚动问题.请大家看看

点击"前进"按钮然后在点击"后退"按钮的时候会出现震动..//请问要怎么清除.
还有,怎么样让鼠标移动上去就停止.鼠标离开就继续
<!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>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
ul{list-style:none}
#wrap{width:740px;height:100px;border:1px solid green;margin:55px auto;overflow:hidden;overflow-x:auto}
ul li{width:100px;height:100px; background:orange;float:left;margin-left:5px;}
#list1,#list2{float:left;}
.box{width:200%;}
</style>
</head>
<body>

<div id="wrap">
<div class="box">
<div id="list1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="list2">
</div>
</div>
</div>
<div class=""><a href="" onclick="setInterval('autoScroll1()',10);return false;">前进</a></div>
<div class=""><a href="" onclick="setInterval('autoScroll2()',10);return false;">后退</a></div>
<div id="num"></div> <script type="text/javascript"> var wrap = document.getElementById("wrap");
var list1 = document.getElementById("list1");
var list2 = document.getElementById("list2");
var num = document.getElementById("num");
list2.innerHTML = list1.innerHTML;
function autoScroll2(){
if(list2.offsetWidth - wrap.scrollLeft <= 0){
wrap.scrollLeft = 0;

}
else{
wrap.scrollLeft++;
num.innerHTML = "滚动条:"+wrap.scrollLeft + "宽度:"+list2.offsetWidth;
}
}
function autoScroll1(){
if(wrap.scrollLeft <= 0){
wrap.scrollLeft = wrap.scrollLeft + list2.offsetWidth;
}
else{
wrap.scrollLeft--;
}
}

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

解决方案 »

  1.   

                            var EventID == null;
                            function SetEven(num)
                            {
                                if (num == 1)
                                {
                                    //前进
                                    EventID = window.setInterval('autoScroll1()',10);
                                }
                                if (num == 2)
                                {
                                    //后退
                                    EventID = window.setInterval('autoScroll2()',10);
                                }
                                if (num == 3)
                                {
                                    //停止
                                    if (EventID != null) window.clearTimeout(EventID);
                                }
                            }
      

  2.   

    <!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>
        <fck:meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">
        *{padding:0;margin:0;}
        ul{list-style:none}
        #wrap{width:740px;height:100px;border:1px solid green;margin:55px auto;overflow:hidden;overflow-x:auto}
        ul li{width:100px;height:100px; background:orange;float:left;margin-left:5px;}
        #list1,#list2{float:left;}
        .box{width:200%;}
        </style>
    </head>
    <body>
        <div id="wrap">
            <div class="box">
                <div id="list1" onmouseover="clearT();" onmouseout="continueRun();">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div id="list2">
                </div>
            </div>
        </div>
        <div class="">
            <a href="javascript:void(0);" onclick="forward(); return false;">前进</a></div>
        <div class="">
            <a href="javascript:void(0);" onclick="back(); return false;">后退</a></div>
        <div id="num">
        </div>    <script type="text/javascript">
            var wrap = document.getElementById("wrap");
            var list1 = document.getElementById("list1");
            var list2 = document.getElementById("list2");
            var num = document.getElementById("num");
            list2.innerHTML = list1.innerHTML;
            var t; //setInterval ID
            var d; //direction:forward or back        function forward() {
                d = "f";
                clearT();
                t = setInterval('autoForward()', 10);
            }        function back() {
                d = "b";
                clearT();
                t = setInterval('autoBack()', 10);
            }        function clearT() {
                clearInterval(t);
            }        function continueRun() {
                if (d) {
                    d == "f" ? forward() : back();
                }
            }        function autoBack() {
                if (list2.offsetWidth - wrap.scrollLeft <= 0) {
                    wrap.scrollLeft = 0;
                }
                else {
                    wrap.scrollLeft++;
                }
            }        function autoForward() {
                if (wrap.scrollLeft <= 0) {
                    wrap.scrollLeft = wrap.scrollLeft + list2.offsetWidth;
                }
                else {
                    wrap.scrollLeft--;
                }
            }          
        </script>
    </body>
    </html>
      

  3.   

    这里为什么还要加:
    /*function continueRun() {
                if (d) {
                    d == "f" ? forward() : back();
                }
            }*/
        //d = "b";
       //d = "f";
      //var d; //direction:forward or back
    请高手解释下..
    还有为什么它一开始(没点按钮情况下)不会滚动