zoukankan      html  css  js  c++  java
  • 特殊例子--JavaScript代码实现图片循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript代码实现图片循环滚动效果</title>
    <style type="text/css">
    .list{
    100px;
    height:100px;
    }
    </style>
    </head>

    <body>
    <div id="demo" style=" overflow: hidden; 1308px; height: 166px;">
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td valign="top" id="marquePic1"> <!--align="right" 水平右对齐 valign="top" 垂直上对齐 -->
    <!-- 要循环滚动的图片 -->
    <table width="1308" border="0" align="center" cellpadding="0" cellspacing="0" >
    <tr align="center">
    <td> <img class="list" src="../../千图网图片/_NRQkwv-I.jpg" border="1" /> </td>
    <td> <img class="list" src="../../千图网图片/0df431adcbef76096709930527dda3cc7cd99e2d.jpg" border="1" /> </td>
    <td> <img class="list" src="../../千图网图片/1.png" border="1" /> </td>
    <td> <img class="list" src="../../千图网图片/2.png" border="1" /> </td>
    <td> <img class="list" src="../../千图网图片/3.png" border="1" /> </td>
    <td> <img class="list" src="../../千图网图片/4.png" border="1" /> </td>
    <td> <img class="list" src="../../千图网图片/5.png" border="1" /> </td>
    <td> <img class="list" src="../../千图网图片/6.png" border="1" /> </td>
    </tr>
    </table>
    </td>
    <td id="marquePic2" width="1"></td>
    </tr>
    </table>
    </div>
    </body>
    <script language="javascript">
    var speed = 30 ; //设置间隔时间
    marquePic2.innerHTML = marquePic1.innerHTML;
    var demo = document.getElementById("demo"); //获取demo对象
    function Marquee(n){ //实现图片循环滚动的方法
    if(marquePic1.offsetWidth-demo.scrollLeft<=0){
    demo.scrollLeft = 0;
    }else{
    demo.scrollLeft = demo.scrollLeft+n;
    }
    }
    var MyMar = setInterval("Marquee(5)",speed);
    demo.onmouseover = function() { //停止滚动
    clearInterval(MyMar);
    }
    demo.onmouseout = function() { //继续滚动
    MyMar = setInterval("Marquee(5)",speed);
    }
    </script>
    </html>

    参数说明:

    1. function:要调用的JavaScript自定义函数名称。

    2. Milliseconds:设置超时时间(以毫秒为单位)。

    功能:经过超时时间后,调用函数。此值可以用clearTimeout()函数清除。

  • 相关阅读:
    Ubuntu adb devices :???????????? no permissions (verify udev rules) 解决方法
    ubuntu 关闭显示器的命令
    ubuntu android studio kvm
    ubuntu 14.04版本更改文件夹背景色为草绿色
    ubuntu 创建桌面快捷方式
    Ubuntu 如何更改用户密码
    ubuntu 14.04 返回到经典桌面方法
    ubuntu 信使(iptux) 创建桌面快捷方式
    Eclipse failed to get the required ADT version number from the sdk
    Eclipse '<>' operator is not allowed for source level below 1.7
  • 原文地址:https://www.cnblogs.com/sutao/p/7099658.html
Copyright © 2011-2022 走看看