实现div中图片的滚动

最新推荐文章于 2023-03-30 08:50:57 发布

weixin_30695195

最新推荐文章于 2023-03-30 08:50:57 发布

阅读量709

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dolphin-gjh/p/3552424.html

版权

今日闲来无事自己写了个图片滚动：

源码：

<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.οnlοad=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>