您的位置：首页 > Web前端 > JavaScript

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

2011-06-10 10:47 337 查看

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

再加了一个进度显示。

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;  //这里您还可以用自己的方式去计算。
代码里面的注释是为了方便测试！
整体代码：
[code]<!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>

[/code]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航