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> 

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

    生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
  • 相关阅读:
    栈的概念
    什么是 JavaConfig?
    数据库连接池的原理。为什么要使用连接池。
    根据你以往的经验简单叙述一下MYSQL的优化
    动态横切
    横切技术
    什么是AOP
    BIO ,NIO ,AIO 有什么区别?
    简述Comparable和Comparator两个接口的区别
    Spring Boot 客户端?
  • 原文地址:https://www.cnblogs.com/pengchenggang/p/943001.html
Copyright © 2011-2022 走看看