帮忙看下左右滚动的 .哪里计算错了啊?

rao3324180 2011-06-09 11:22:35

研究了很久都没参透

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

 <head>

  <title> New Document </title>

<script type="text/javascript" src="js/jquery-1.6.js">

</script>

<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;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;}

#text li{width:150px;float:left;}

</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">

		<ul>

			<li></li>

			<li></li>

			<li></li>

		</ul>

	</div>





	<script type="text/javascript">



		var dir;

		var i=0;

		var speed = 0;

		var timer = null;

		var num =0;

		var before = document.getElementById("before");

		var after = document.getElementById("after");

		var text = document.getElementById("text");

		function clicks(){

			before.onclick = be;

			after.onclick = ft;

		}

		clicks()

		function be(){

			dir = true;

			move();

		}

		function ft(){

			dir = false;

			move();

		}

		function move(){

			var con = document.getElementById("con");

			var arr = [0,-800,-1600,-2400];

			if(dir == true){

				if(i == arr.length-1){

					return;

				}

				speed += (arr[i+1] - con.offsetLeft)/5;

				con.style.left = parseInt(speed) + "px";

					

				if(speed <= arr[i+1]){

					i++;

				}

				else{

					clearTimeout(timer);

					timer = setTimeout("move()",20);

				}

				document.getElementById("text").getElementsByTagName("li")[0].innerHTML += parseInt(speed) + ":"+con.offsetLeft+arr[i+1]+":"+i+"<br />"; 

			}



			if(dir == false){

				if(i<1){

					return;

				}

				document.getElementById("text").getElementsByTagName("li")[2].innerHTML += parseInt(speed) +":"+con.offsetLeft+":"+arr[i-1]+":"+i+"s" +"<br />"; 

				speed -= (arr[i-1] + con.offsetLeft)/5;

				con.style.left = parseInt(speed) + "px";

				

				if( parseInt(speed) == arr[i-1]){

				//alert("s") ;

				i--;

				}

				else{

					clearTimeout(timer);

					timer = setTimeout("move()",20);

				}

				document.getElementById("text").getElementsByTagName("li")[1].innerHTML += parseInt(speed) +":"+con.offsetLeft+":"+arr[i-1]+":"+i+ "<br />"; 

			}

		}

//alert(0 + -159)

	</script>



 </body>

</html>