实现div中图片的滚动
今日闲来无事自己写了个图片滚动：
源码：
<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>
效果图：
示例图一
示例图二
本示例存在小小的瑕疵，在图片显示完之后会出现跳动转换。在下篇博文中会对此进行改进。敬请期待。。。
