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

源码：

<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>

效果图：

示例图一

示例图二

本示例存在小小的瑕疵，在图片显示完之后会出现跳动转换。在下篇博文中会对此进行改进。敬请期待。。。

实现div中图片的滚动的更多相关文章

  1. div+css:div中图片垂直居中

    div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  2. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

  3. div 中图片溢出问题及 CSS3中图片翻转问题

    如果设置一个div 装两张以上的图片,如果不设置好div的宽度和高度,就会使图片溢出. 我们知道,div是可以由图片撑开其宽高的,也就是说如果只放一张图片的情况下,不设置div的宽高,div的宽高会默 ...

  4. 移动设备的HTML页面中图片实现滚动加载

    如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时, ...

  5. JavaScript设置div中的文字滚动起来 实现滚动效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. div图片垂直居中 如何使div中图片垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂 ...

  7. 在父容器div中图片下方有一条空隙问题

    问题:<div><img src="mm1.jpg"></div> 然后,表现就是一张图片呈现,类似下面这样: 恩,看上去很正常,一切都是理所当 ...

  8. js 动态设置 div 背景图片 并滚动显示

    var imgs =["../img/index/bgstyle/style1/index_top_bg2.jpg", "../img/index/bgstyle/sty ...

  9. 关于div中图片水平垂直居中的问题

    最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示 我没有用table布局,而是用了div+css,找了很久,终于在网上找到解决方案,特此记录备用 关键核心代码如下: <div ...

随机推荐

  1. 在msvc中使用Boost.Spirit.X3

    Preface “Examples of designs that meet most of the criteria for "goodness" (easy to unders ...

  2. Visual C++基础知识（ｗｉｎ３２ｅｘｅ）

    1.Visual C++简称VC或者VC++ 是一个集成开发环境(编辑器+调试器+编译器) gcc---Linux和Unix的C++编译器 Vc----Windows的C++编译器 2.MFC(Mic ...

  3. 一句SQL实现MYSQL的递归查询

    众所周知,目前的mysql版本中并不支持直接的递归查询,但是通过递归到迭代转化的思路,还是可以在一句SQL内实现树的递归查询的.这个得益于Mysql允许在SQL语句内使用@变量.以下是示例代码. 创建 ...

  4. jade的基本语法

    - for (var i=0;i<3;i++) li scnu-learn //这里的=,默认会转义内容 p= "Welcome scnu <strong>good< ...

  5. Oracle11g R2学习系列 之二基本概念和环境介绍

    昨天安装好了之后,发现用Chrome打开OEM发现是英文的,搞得我好奇怪:安装时明明自动显示的是中文的,为何会是英文的呢.后来想想会不会是Oracle用的是浏览器的语言呢,果断打开Chrome的设置, ...

  6. 火狐的bug

    初次启动火狐的界面并且默认是最大化的情况下,第一个业签时会发现火狐的浏览器无法达到下边框,请看图 途中可以看到,body区域没有填充满浏览器可用区域.但是当浏览器已经启动页签,现在是第二个页签时,则不 ...

  7. iframe与frameset有什么区别

    frame,iframe,frameset 的区别 <FRAMESET> <FRAME><NOFRAMES><IFRAME>欲明白本篇[HTML剖析]之 ...

  8. vi 编辑器初步

    vi 编辑器初步 4,vi进入后是命令模式 ,可以用i o s 进入插入模式 i ,在当前字符位置插入,o为新开一行插入,s删除当前字符添加 5,r 为直接替换当前字符 6,到行头按0,$为到行尾到未 ...

  9. 单片微机原理P3：80C51外部拓展系统

    外部拓展其实是个相对来说很好玩的章节,可以真正开始用单片机写程序了,比较重要的是外部存储器拓展,81C55拓展,矩阵键盘,动态显示,DAC和ADC.   0. IO接口电路概念与存储器拓展 1. 为什 ...

  10. 图铭Android平台银行卡号识别系统

    随着智能终端(智能手机及平板电脑)及移动通信(3G)的发展,原来运行在PC上的信息系统(如邮件系统.即时通信.网页浏览.协同办公.网络购物.社交网站.博客等)逐渐转移到智能终端设备上.可以预见未来几年 ...