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> 

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

    生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
  • 相关阅读:
    7.内网渗透之windows认证机制
    10.Python之Ansible自动化运维常用模块
    9.python 系统批量运维管理器之Fabric模块
    8.python 系统批量运维管理器之pexpect模块
    7.python实现高效端口扫描器之nmap模块
    6.python探测Web服务质量方法之pycurl模块
    5.python之pip安装模块失败
    4.python 系统批量运维管理器之paramiko模块
    3.python 发送邮件之smtplib模块
    微慕WordPress小程序增强版
  • 原文地址:https://www.cnblogs.com/pengchenggang/p/943001.html
Copyright © 2011-2022 走看看