用户登录  |  用户注册
首 页源码下载网络学院最新源码源码排行屏蔽广告
当前位置:新兴网络 > 网络学院 > 网页制作 > JavaScript

图片(向上/下/左/右)循环滚动实例

减小字体 增大字体 作者:佚名  来源:本站整理  发布时间:2010-05-07 14:53:48
向上滚动:
HTML code运行代码复制代码编辑
<html>
<head><title>图片向上循环滚动</title><head>
<body>
<div id=demo style="overflow:hidden; width:210px; height:300px;">
<div id=demo1>
<img src="http://www.newxing.com/skins/NewXing/logo.gif"><br><br>
<img src="http://www.newxing.com/skins/NewXing/logo.gif"><br><br>
<img src="http://www.newxing.com/skins/NewXing/logo.gif"><br><br>
<img src="http://www.newxing.com/skins/NewXing/logo.gif"><br><br>
<img src="http://www.newxing.com/skins/NewXing/logo.gif"><br><br>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
    var speed = 30;
    demo2.innerHTML = demo1.innerHTML;
    function Marquee() {
        if (demo2.offsetTop - demo.scrollTop <= 0)
         demo.scrollTop -= demo1.offsetHeight
        else {
            demo.scrollTop++;
        }
    };
    var MyMar = setInterval(Marquee, speed);
    demo.onmouseover = function() {
        clearInterval(MyMar)
    };
    demo.onmouseout = function() {
        MyMar = setInterval(Marquee, speed)
    };
</SCRIPT>
</body>
</html>

向下滚动:

HTML code运行代码复制代码
<html>
<head><title>图片向下循环滚动</title><head>
<body>
<div id=demo style="overflow:hidden; width:210px; height:300px;">
<div id=demo1>
<img src="http://www.newxing.com/skins/NewXing/logo.gif"><br><br>
<img src="http://www.newxing.com/skins/NewXing/logo.gif"><br><br>
<img src="http://www.newxing.com/skins/NewXing/logo.gif"><br><br>
<img src="http://www.newxing.com/skins/NewXing/logo.gif"><br><br>
<img src="http://www.newxing.com/skins/NewXing/logo.gif"><br><br>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
    var speed = 30;
    demo2.innerHTML = demo1.innerHTML;
    function Marquee() {
        if(demo1.offsetTop-demo.scrollTop>=0)
   demo.scrollTop+=demo2.offsetHeight;
        else {
            demo.scrollTop--;
        }
    };
    var MyMar = setInterval(Marquee, speed);
    demo.onmouseover = function() {
        clearInterval(MyMar)
    };
    demo.onmouseout = function() {
        MyMar = setInterval(Marquee, speed)
    };
</SCRIPT>
</body>
</html>

向左滚动:

HTML code运行代码复制代码
<html>
<head><title>图片向左循环滚动</title><head>
<body>
<div id=demo style="overflow:hidden;height:68px;width:800px;"><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top nowrap="nowrap">
<img src="http://www.newxing.com/skins/NewXing/logo.gif">
<img src="http://www.newxing.com/skins/NewXing/logo.gif">
<img src="http://www.newxing.com/skins/NewXing/logo.gif">
<img src="http://www.newxing.com/skins/NewXing/logo.gif">
</td><td id=demo2 valign=top></td></tr></table></div>
<script>
    var speed = 30;
    demo2.innerHTML = demo1.innerHTML;
    function Marquee() {
        if (demo2.offsetWidth - demo.scrollLeft <= 0) 
            demo.scrollLeft -= demo1.offsetWidth;
        else {
            demo.scrollLeft++;
        }
    };
    var MyMar = setInterval(Marquee, speed);
    demo.onmouseover = function() {
        clearInterval(MyMar)
    };
    demo.onmouseout = function() {
        MyMar = setInterval(Marquee, speed)
    };
</SCRIPT>
</body>
</html>

向右滚动:

HTML code运行代码复制代码
<html>
<head><title>图片向右循环滚动</title><head>
<body>
<div id=demo style="overflow:hidden;height:68px;width:800px;"><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top nowrap="nowrap">
<img src="http://www.newxing.com/skins/NewXing/logo.gif">
<img src="http://www.newxing.com/skins/NewXing/logo.gif">
<img src="http://www.newxing.com/skins/NewXing/logo.gif">
<img src="http://www.newxing.com/skins/NewXing/logo.gif">
</td><td id=demo2 valign=top></td></tr></table></div>
<script>
    var speed = 30;
    demo2.innerHTML = demo1.innerHTML;
    function Marquee() {
        if(demo.scrollLeft<=0)
            demo.scrollLeft+=demo2.offsetWidth
        else {
            demo.scrollLeft--;
        }
    };
    var MyMar = setInterval(Marquee, speed);
    demo.onmouseover = function() {
        clearInterval(MyMar)
    };
    demo.onmouseout = function() {
        MyMar = setInterval(Marquee, speed)
    };
</SCRIPT>
</body>
</html>

Tags:图片 循环 滚动

作者:佚名
  • 好的评价 如果您觉得此文章好,就请您
      100%(7)
  • 差的评价 如果您觉得此文章差,就请您
      0%(0)

网络学院评论评论内容只代表网友观点,与本站立场无关!

   评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论