我哪里计算错了啊 .怎么点"前进"移动的位置错位了呢?

帮忙看下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title><style>
*{margin:0;padding:0;}
ul{list-style:none outside none}
.fl{float:left;display:inline}
.fr{float:left;display:inline}
#wrap{width:800px;height:130px;border:1px solid orange;margin:20px auto;position:relative;overflow:hidden}
#con{width:3200px;position:absolute;top:0;left:0;}
#con li{width:800px;height:130px;float:left}
.red{background:red;}
.blue{background:blue;}
.yellow{background:yellow;}
.pink{background:pink;}
</style> </head> <body>
    <div id="before">前进</div>
    <div id="wrap">
        <div id="con">
            <ul>
                <li class="red"></li>
                <li class="blue"></li>
                <li class="yellow"></li>
                <li class="pink"></li>
            </ul>
        </div>
    </div>
    <div id="after">后退</div>

<div id="text"></div>
<script type="text/javascript">
var before = document.getElementById("before");
var after = document.getElementById("after");
var dir;
var speed = 0;
var i=0;
var timer = null;
var direction = {
left :0,
right:1
}
function clicks(){
before.onclick = be;
after.onclick = af;
}
clicks()
function be(){
dir = direction.left;
move();
}
function af(){
dir = direction.right;
move();
}
function move(){
var con = document.getElementById("con");
var end;
var arr = [0,-800,-1600,-2400];

switch(dir){
case direction.left:
if(i >= arr.length-1){
return;
}
speed -= (arr[i] - con.offsetLeft)/5;
con.style.left = parseInt(speed) + "px";
if(speed < arr[i+1]){
i++;
}
else{
clearTimeout(timer);
timer = setTimeout("move()",20);
}

break;
case direction.right:
if(i < 1){
return;
}
speed +=200;
con.style.left = speed + "px";
if(speed >= arr[i-1]){
i--;
}
else{
clearTimeout(timer);
timer = setTimeout("move()",20);
}
break;
}
}
//alert(-1 - 0.2)
</script> </body>
</html>

解决方案 »

  1.   


    <!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>
        <title></title>   
        
         <script type="text/javascript" src="jquery-132min2.js"></script>
         <style type="text/css">
             *{margin:0;padding:0;}
            ul{list-style:none outside none}
            #wrap{width:800px;height:130px;border:1px solid orange;margin:20px auto;position:relative;overflow:hidden}
            #con{width:3200px;position:absolute;top:0;left:0;}
            #con li{width:800px;height:130px;float:left}
            .red{background:red;}
            .blue{background:blue;}
            .yellow{background:yellow;}
            .pink{background:pink;}
         </style>
    </head>
    <body>      
        <div id="wrap">
            <div id="con">
                <ul>
                  <li class="red"></li>
                  <li class="blue"></li>
                  <li class="yellow"></li>
                  <li class="pink"></li>
                </ul>
            </div>
        </div>
        <div style="text-align:center;">
            <a href="#" id="qq">qj</a>
            &nbsp;&nbsp;&nbsp;
            <a href="#" id="hh">ht</a>
        </div>
        <script type="text/javascript">
            $(document).ready(function () {            var index = 1;
                $("#qq").click(function () {                $("#con").animate({ "left": "-=800px" }, 1000);                return false;            });
                $("#hh").click(function () {                $("#con").animate({ "left": "+=800px" }, 1000);                return false;
                });
            });
        </script>
    </body>
    </html>
      

  2.   

    呵呵  我上面 var的index就是为你留的 判断 
      

  3.   


    $(document).ready(function () {            var index = 0;
                $("#qq").click(function () {
                    index++;
                    if (index == 4) {
                        $("#con").animate({ "left": "+=2400px" }, 1000);
                        index = 0;
                    }
                    else {
                        $("#con").animate({ "left": "-=800px" }, 1000);
                    }               
                    return false;            });
                $("#hh").click(function () {
                    if (index == 0) {
                        $("#con").animate({ "left": "-=2400px" }, 1000);
                        index = 4;
                    }
                    else {
                        $("#con").animate({ "left": "+=800px" }, 1000);
                    }
                    index--;
                    return false;
                });
            });额  不好意思  帖子沉了  没看到