<!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>