zoukankan      html  css  js  c++  java
  • JS写四个图片滚动显示的效果

    <!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>4张图片轮换</title>
    <style type="text/css">
    #a{
    width:800px;
    height:500px;
    position:relative;
    top:50px;
    margin:auto;
    border:2px solid #609;
    overflow:hidden;
    
    }
    #ta
    {
    position:relative;
    left:0px;
    top:0px;
    transition:0.7s;
    }
    </style>
    
    
    </head>
    
    <body>
    <div id="a" >
    <table id="ta" cellpadding="0" cellspacing="0">
    <tr height="500" >
    <td><img src="image/1.jpg" /></td>
    <td><img src="image/2.jpg" /></td>
    </tr>
    <tr height="500" >
    <td><img src="image/3.jpg" /></td>
    <td><img src="image/4.jpg" /></td>
    </tr>
    
    </table>
    </div>
    </body>
    </html>
    <script>
    document.getElementById("ta").style.left="0px";
    document.getElementById("ta").style.top="0px";
    function kid()
    {
    var m = parseInt(document.getElementById("ta").style.left);
    var n = parseInt(document.getElementById("ta").style.top);
    
    if(m==0&&n==0)
    {
    document.getElementById("ta").style.left=-800+"px";
    document.getElementById("ta").style.top=0+"px";
    }
    else if(m==-800&&n==0)
    {
    document.getElementById("ta").style.left=-800+"px";
    document.getElementById("ta").style.top=-500+"px";
    
    }
    else if(m==-800&&n==-500)
    {
    document.getElementById("ta").style.left=0+"px";
    document.getElementById("ta").style.top=-500+"px";
    
    }
    else if(m==0&&n==-500)
    {
    document.getElementById("ta").style.left=0+"px";
    document.getElementById("ta").style.top=0+"px";
    
    }
    window.setTimeout("kid()",1000);
    }
    window.setTimeout("kid()",1000);
    </script>
  • 相关阅读:
    6种负载均衡算法
    Java中volatile关键字
    剑指offer练习
    linux系统查看IP地址,不显示IP地址或者只显示127.0.0.1
    Nginx负载均衡配置
    集群应用Session一致性实现的三种方案
    rabbitMQ学习
    JDK1.8在LINUX下安装步骤
    ecplise部署gradle web项目
    Kubernetes下的应用监控解决方案
  • 原文地址:https://www.cnblogs.com/kuangwong/p/6115203.html
Copyright © 2011-2022 走看看