zoukankan      html  css  js  c++  java
  • 图片循环滚动代码(无缝滚动)(分别向上、下、左、右)

    向上:程序代码
    <div id=demo style="overflow:hidden; 128px; height:300px;"> 
    <div id=demo1> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><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> 


    向下:程序代码
    <div id=demo style="overflow:hidden; 128px; height:300px;"> 
    <div id=demo1> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    </div> 
    <div id=demo2></div> 
    </div> 
    <script language="javascript"> 
    var speed=30 
    demo2.innerHTML=demo1.innerHTML 
    demo.scrollTop=demo.scrollHeight 
    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> 


    向左:程序代码
    <div id=demo style="overflow:hidden;height:100px;300px;"><table align=left 
    cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img 
    src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img 
    src="bzjd.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> 




    向右:程序代码
    <div id=demo style="overflow:hidden;height:100px;300px;"><table align=left 
    cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img 
    src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img 
    src="bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div> 
    <script> 
    var speed=30 
    demo2.innerHTML=demo1.innerHTML 
    demo.scrollLeft=demo.scrollWidth 
    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> 

    ---------------------------------------------
    生活的意义并不是与他人争高下,而在于享受努力实现目标的过程,结果是对自己行动的嘉奖。
    ↑面的话,越看越不痛快,应该这么说:

    生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
  • 相关阅读:
    利用Fck的javascriptAPI创建fck编辑器
    ExtJs学习笔记(6)_可分页的GridPanel
    SqlTransaction 数据库编程事务使用示例
    ExtJs学习笔记(5)_Ajax示例
    [转贴]三种Ext提交数据的方法
    ExtJs学习笔记(15)_fit布局
    证书创建工具 (Makecert.exe)
    学习ExtJs的几个资源(好多是中文的哦)
    DateTime在ExtJs中无法正确序列化的问题
    ExtJs学习笔记(2)_Basic GridPanel[基本网格]
  • 原文地址:https://www.cnblogs.com/pengchenggang/p/943001.html
Copyright © 2011-2022 走看看