一个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 id="Progress">
<ul>
<li style="background:orange">
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<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 -= 100/5;
con.style.left = parseInt(speed) + "px";
if(speed <= arr[i+1]){
i++;
document.getElementById("Progress").getElementsByTagName("li")[i].style.background = "orange";
document.getElementById("Progress").getElementsByTagName("li")[i-1].style.background = "#fff";
}
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 +"<br />";
speed += 100/5;
con.style.left = parseInt(speed) + "px";
if( parseInt(speed) == arr[i-1]){
i--;
document.getElementById("Progress").getElementsByTagName("li")[i].style.background = "orange";
document.getElementById("Progress").getElementsByTagName("li")[i+1].style.background = "#fff";
}
else{
clearTimeout(timer);
timer = setTimeout("move()",20);
}
//document.getElementById("text").getElementsByTagName("li")[1].innerHTML += parseInt(speed) +":"+con.offsetLeft+":"+arr[i-1]+":"+i+ "<br />";
}
}
</script>
</body>
</html>
