<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
<div style="border:5px #666 solid; width:500px; height:350px; overflow:hidden;">
<div id="box">
<div style="width:500px; height:350px; background-color:#0F0;">One</div>
<div style="width:500px; height:350px; background-color:#00F;">Two</div>
<div style="width:500px; height:350px; background-color:#696;">Three</div>
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var Top=-350;//定義一個(gè)向上移動(dòng)的距離，這個(gè)數(shù)值和你圖片或DIV的高度相等
var Time=500;//定義一個(gè)速度
function move(){
$("#box").animate({"margin-top":Top},Time);//animate方法，只能對(duì)數(shù)值型的值進(jìn)行漸變
Top+=-350;//運(yùn)行一次增加一個(gè)圖片的高度
if(Top==-1050)//判斷當(dāng)總高度大于你DIV或者圖片總高度
{
Top=0;//把距離設(shè)置回0
Time=400;//加快移動(dòng)速度
}
else
{
Time=500;//否則減慢速度
}
}
setInterval(move,3000);//3秒執(zhí)行一次move()
})
</script>
</body>
</html>
