<!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>图片滚动测试</title>
<script type="text/javascript" src="jqs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var top=-350;
var time=500;
function move(){
$("#box").animate({"margin-top":top},time);
top+=-350;
if(top==-1400){
top=0;
time=400;
}
else{
time=500;
}
}
setInterval(move,1000);
})
</script>
<style type="text/css">
#main{
width:500px;
height:350px;
border:5px #999 solid;
overflow:hidden;
margin:10px auto;
}
.tag{
width:500px;
height:350px;
}
.tag1{
background:#F00;
}
.tag2{
background:#0F0;
}
.tag3{
background:#00F;
}
.tag4{
background:#FF0;
}
</style>
</head>
<body>
<div id="main">
<div id="box">
<div class="tag tag1"></div>
<div class="tag tag2"></div>
<div class="tag tag3"></div>
<div class="tag tag4"></div>
</div>
</div>
</body>
</html>
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片滚动测试</title>
<script type="text/javascript" src="jqs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var top=-350;
var time=500;
function move(){
$("#box").animate({"margin-top":top},time);
top+=-350;
if(top==-1400){
top=0;
time=400;
}
else{
time=500;
}
}
setInterval(move,1000);
})
</script>
<style type="text/css">
#main{
width:500px;
height:350px;
border:5px #999 solid;
overflow:hidden;
margin:10px auto;
}
.tag{
width:500px;
height:350px;
}
.tag1{
background:#F00;
}
.tag2{
background:#0F0;
}
.tag3{
background:#00F;
}
.tag4{
background:#FF0;
}
</style>
</head>
<body>
<div id="main">
<div id="box">
<div class="tag tag1"></div>
<div class="tag tag2"></div>
<div class="tag tag3"></div>
<div class="tag tag4"></div>
</div>
</div>
</body>
</html>