今日闲来无事自己写了个图片滚动：
源码：
<html>
<head>
<meta
charset="utf-8"/>
<script
type="text/javascript">
var content;
var
borderStyle;
var n=0;
var
intervalN;
function
up()
{
var
borderStyleHeight=borderStyle.offsetHeight;
var
contentHeight=content.offsetHeight;
if(n<borderStyleHeight)
{
n=n+1;
content.style.top=n+"px";
}
else
{
n=-300;
}
}
window.onload=function(){
content=document.getElementById("content");
borderStyle=document.getElementById("borderStyle");
intervalN=setInterval("up()",10);
}
</script>
<style
type="text/css">
#borderStyle{
width:500px;
height:500px;
position:absolute;
border:1px
solid
red;
z-index:2;
background-color:Blue;
overflow:hidden;
}
#content{
margin-left:40;
height:300px;
position:absolute;
border:1px
solid
red;
z-index:1;
}
</style>
</head>
<body>
<center>
<div
id="borderStyle">
<div
id="content">
<div>
<img
src="Images/apple_1_bigger.jpg"
/>
</div>
<div>
<img
src="Images/apple_2_bigger.jpg"
/>
</div>
<div>
<img
src="Images/apple_3_bigger.jpg"
/>
</div>
<div>
<img
src="Images/apple_4_bigger.jpg"
/>
</div>
</div>
<div>
</center>
</body>
</html>
效果图：
示例图一
示例图二
本示例存在小小的瑕疵，在图片显示完之后会出现跳动转换。在下篇博文中会对此进行改进。敬请期待。。。
原文：http://www.cnblogs.com/dolphin-gjh/p/3552424.html