• 上下左右无空隙不间断图片连续滚动代码


    向上:

    <div id=demo style=overflow:hidden;height:100;90;
    background:#214984;color:#ffffff>
    <div id=demo1>
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    </div>
    <div id=demo2></div>
    </div>
      <script>
      var speed=30
      demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2
      function Marquee(){
    //当滚动至demo1与demo2交界时
    if(demo2.offsetTop-demo.scrollTop<=0) 
    demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
    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:100;90;
    background:#214984;color:#ffffff>
    <div id=demo1>
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    <img src="http://www.baidu.com/img/logo.gif">
    </div>
    <div id=demo2></div>
    </div>
        <script>
        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;670px;color:#ffffff;">
          <table cellpadding="0" cellspacing="0" border="0">
            <tr><td id="demo1" valign="top" align="center">
              <table cellpadding="2" cellspacing="0" border="0">
                <tr align="center">
                  <td><img src="http://www.baidu.com/img/logo.gif" ></td>
                  <td><img src="http://www.baidu.com/img/logo.gif" ></td>
                  <td><img src="http://www.baidu.com/img/logo.gif" ></td>
                  <td><img src="http://www.baidu.com/img/logo.gif" ></td>
                  <td><img src="http://www.baidu.com/img/logo.gif" ></td>
                </tr>
              </table>
            </td>
            <td id="demo2" valign="top"></td>
            </tr>
          </table>
        </div>
      <script>
      var speed=1//速度数值越大速度越慢
      demo2.innerHTML=demo1.innerHTML
      function Marquee(){
       if(demo.scrollLeft>=demo2.offsetWidth)
      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;670px;color:#ffffff;">
          <table cellpadding="0" cellspacing="0" border="0">
            <tr><td id="demo1" valign="top" align="center">
              <table cellpadding="2" cellspacing="0" border="0">
                <tr align="center">
                  <td><img src="http://www.baidu.com/img/logo.gif"></td>
                  <td><img src="http://www.baidu.com/img/logo.gif"></td>
                  <td><img src="http://www.baidu.com/img/logo.gif"></td>
                  <td><img src="http://www.baidu.com/img/logo.gif"></td>
                  <td><img src="http://www.baidu.com/img/logo.gif"></td>
                </tr>
              </table>
            </td>
            <td id="demo2" valign="top"></td>
            </tr>
          </table>
        </div>
      <script>
      var speed=1//速度数值越大速度越慢
      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>
  • 相关阅读:
    i++ ++i i=i+1 和i+=1
    cmd命令行 端口
    WAS 查看服务状态
    Linux 拷贝
    jar 压缩 解压 war包
    数据结构
    jar包生成exe可执行程序
    03-vant的一些事
    01-watch原理/computed原理
    05-问题集合
  • 原文地址:https://www.cnblogs.com/footleg/p/1613666.html
Copyright © 2020-2023  润新知