一个javascript的左右滚动切换效果！

好久没写博客了，今天无聊做了个滚动的效果，

再加了一个进度显示。

document.getElementById("Progress").getElementsByTagName("li")[i].style.background = "orange";
document.getElementById("Progress").getElementsByTagName("li")[i-1].style.background = "#fff";

这个效果主要是对“前进”和“后退”进行判断.

if(i == arr.length-1){
return;
}

这里是当“前进”到最后一个背景色就停止并返回了.

speed -= 100/5;
con.style.left = parseInt(speed) + "px";

这里对con的左定位进行计算,

if(speed <= arr[i+1]){
i++;
}
else{
clearTimeout(timer);
timer = setTimeout("move()",20);
}

这里如果speed 小于或等于arr[i+1] 就i++；

否则setTimeout("move()",20);会一直执行move（）；

speed -= 100/5;  //这里您还可以用自己的方式去计算。
代码里面的注释是为了方便测试！
整体代码：


<!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;}
#Progress{position:absolute;left:50%;top:2px;width:50px}
#Progress li{float:left;width:6px;height:6px;border:1px solid #ccc;margin-right:3px}
</style>

 </head>

 <body>
    <div ; 
            }
        }
    </script>

 </body>
</html>